Would be cool to have a theme editor so that people who have no idea what the README-themes on GitHub means like me can customize their engine, and without the hustle of sending it, make it darker, a different font, etc… I’m a fan of the engine but that doesn’t mean I like how it looks so it could improve my workflow
=)
To be specific, I would like to make it look like Defold
A software theme is based on colour schemes (light, dark, low contrast…).
Working with colour is waaaaaaay trickier than we could imagine (this article explains it in a nutshell Light & Dark Color Modes in Design Systems | by Nathan Curtis | EightShapes | Medium).
As you can image, every theme requires adjustments for every UI component (buttons, inputs, lists, etc.) So maintaining more than 2 themes requires time -from designers and engineers-. It gets quite technical if we look under the hood of how their colours are assigned (they’re called “design tokens”) as any colour change impacts other areas of the app.
Today’s official themes are Dark and Light.
We are well aware that they’re not perfect (there’s constant ongoing work on improving both, but as you saw on GitHub we need to proceed with caution). This is the approach that we will follow: we’ll support dark and light purple theme only, but our GitHub will still be available for anyone who wants to access the colour themes to play around.
What I observe from the support images that you share (specially with Asprite’s example) is that you want to change the design of each component (the second example of the UI is not only dark mode, but the visual appearance and size are different)?
Unfortunately, this won’t be possible.
GDevelop will go through a phase of evolution and its components will change too (you’ll might come across some of my messages looking for 1 to 1 video conversations so I can gather information on how y’all use the tool). This conversations are important since they’ll shape future GDevelop versions. I would be glad to talk to you in the future for the themes that matter to you! To do so, this is where I “recrute” participants:
If you’re present on Discord, you’ll see the messages on the “announcements” channel.
If you answered the “Getting to know the GDevelop community” questionaire, I’ll reach you directly by email
And if you’re not present on either, you’ll see messages on the forum under “Feature requests”.
That being said, thank you for the software images.
They help me to better understand what you visually expect from your Engines.
Hi, I’m very interested in color themes customization.
I propose simple things:
The simpler way I suppose is to put folder “UI/Theme” with all the content in installed GDevelop desktop version.
At start GDevelop desktop version will read the customized themes files.
Customization EDITING index.js AND theme.json files
The customization would be editing index.js and theme.json files under themes folders, and possibly to be able to create new themes (folders) too.
Customization INSIDE GDevelop through a list of colors
In GDevelop IDE then you could change colors and create new themes.
Hi, I was going to create a new feature request but I saw that this topic exists, so I will let my thoughts here:
I noticed that the different GDevelop themes are mostly changes in the engine color palette, labeled by this:
Primary color.
Secondary color.
Differences between the primary and secondary color:
The primary color is used at almost everywhere in the engine, while the secondary color is used in combination with the primary.
Example 1: When a tab is selected, its color is the primary, when unselected, its color is the secondary.
Example 2: The condition section of the eventsheet has the primary color as background, while the action section has the secondary color as the background.
Next labels:
Border color. (The color of lines and borders in the engine.)
Color of object names in eventsheet.
Color of numeric values in eventsheet.
Color of string values in eventsheet.
Color of variable names in eventsheet.
Color of special parameters in eventsheet. (Image resource, font resource, layer name, etc. Its the same color for all special parameters.)
Color of invalid parameters. (When you leave a parameter empty or input a invalid expression)
My suggestion is:
Adding a “Custom theme” option in the theme selection. It would unlock a button labeled “Create a new theme”, which when clicked, it would display a pop-up with the 9 labels mentioned above.
Once upon clicking one of the labels, it would display a RGB/HEX color picker, asking you to pick a color and confirm.
After finished modifying the desired labels, you can confirm the creation of your custom theme and give it a name.
The custom theme is now avaliable as an option in the theme selection, with the name you gave.
You can delete it by clicking on a x button next to its name when you are at the theme selection, it will ask you to confirm the deletion.
Selectable default-colors in custom themes would also be good for event groups, event comments, scene background
An inport/export would be good so that we don’t lose the theme when reinstalling, change device,… and it makes it possible to share themes in the community.
