GDevelop Themes

Themes are a consistent set of colors and other styles that unify the look and feel of the application.

How themes are handled

Theme styles are held in a theme.json, which is used to generate:

A .css file, containing the styles as CSS Custom Properties. These properties are set by applying the theme class to specific sections of the app. To see where the properties are used, see the stylesheets in the Global folder.
A .json file, containing the styles as a flat object, where each style is a field. This is imported and used by the Material UI library as well as custom components

They are created by leveraging Style Dictionary to compile them from theme.json using the build-theme-resources script in the scripts folder. There is also an npm script to run it (build-theme-resources).

Creating new themes

Themes are stored in this Theme Folder. Each theme has its own subfolder containing:

A JavaScript file (index.js) to generate the object describing the theme that is used by the editor (class names, values to apply to Material-UI) and that also imports the CSS file.
The theme.json file which stores the theme details (colors, widths, etc.)

To create the necessary files, run the following command:

bash

npm run create-new-theme "<Theme Name>"

This will create the files index.js, theme.json and the folder to contain them, with the theme name filled in and some default values. It will also update files in the root directory, as well as recompile all themes (including the new one).

Editing a theme

To edit a theme, make any changes in the theme.json file, and then run

bash

npm run build-theme-resources

to compile the styles into the .css and .json files. This command will need to be run any time changes are made.