Gdevelop: [$80 Bounty] Simplify theme creation (possibly using CSS variables)

[4ian]

When making a theme, there is a bunch of CSS files to modify:

It's working ok so far, unfortunately:

1. It's hard to maintain: these CSS files contain a mix of colors and a mix of CSS rules for the padding, or other stuff that are unrelated to the theme. This duplication is making harder to maintain the styling (if you update something in a theme, you have to update it for every theeme) and we risk forgetting a theme. For example:

   • This should not be in a theme specific CSS file and should be moved to a generic CSS file for markdown:

   https://github.com/4ian/GDevelop/blob/4324526689519a6ca809db9d211f7e45a158cd6f/newIDE/app/src/UI/Theme/NordTheme/Markdown.css#L23-L25

   • Same for these:

   https://github.com/4ian/GDevelop/blob/4324526689519a6ca809db9d211f7e45a158cd6f/newIDE/app/src/UI/Theme/DarkTheme/Mosaic.css#L33-L38
   Apart from the color, everything else should be in a single CSS file.

   • Same for these complex rules that are repeated in every theme, while it could be a single variable:
     https://github.com/4ian/GDevelop/pull/1858/files#diff-3e7e1efe881654dfe25f559c629aeeeeR38-R43

2. It's less performant when we'll have more themes. This duplication is also putting more pressure on the browser CSS engine. Instead if we have a single set of CSS files and if we use CSS variables, this would reduce the duplication of CSS rules that we have for every theme.

3. There is also a bunch of duplication in the index.js files (for example, search for // Use non rounded buttons). We could move these into common variables or a function generating the material-ui theme (createMuiTheme).

---

I've created this issue (that is actually a refactoring/"feature request") so that I can add a bounty on this. The bounty will be awarded to anyone refactoring the existing themes into a set of simple files that are just containing colors, potentially using CSS variables (though anything in JS that is performant is fine too) and helper functions.
The goal is for each theme to be a set of colors, in at most one JS file and one CSS file.

[4ian]

Bounty is posted here: https://www.bountysource.com/issues/92286673-bounty-simplify-theme-creation-possibly-using-css-variables

[TheGemDev]

i think i should try this.

[4ian]

Fixed in #2127 by @randers444. Thanks!!