mirror of
https://github.com/4ian/GDevelop.git
synced 2025-10-15 10:19:04 +00:00
42 lines
1.8 KiB
Markdown
42 lines
1.8 KiB
Markdown
# 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](https://amzn.github.io/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](./app/src/UI/Theme). 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.
|