New theme that I'm working on

I’m creating a new theme for Gdevelop 5



Hope that’s nice

5 Likes

An black and white theme ? Why not.

2 Likes

Let’s be real here. Dark theme should have been on by default.

3 Likes

Really nice. Reminds me of Godot. Which is a good thing cause I love the theme it has. Is modifying the theme difficult?

3 Likes

Does anyone know how to change the width of the sidebar boxes?
After every start I have to pull them from default to minimum…
It would be good if the default was the minimum or user settings are saved. I had the suggestion still 2 years ago… sooo, do I have a chance to change it by myself in a program file?bar

1 Like

if you want to modify a theme in you need to have the source folder which you can download here GitHub - 4ian/GDevelop: GDevelop is an open-source, cross-platform game engine designed to be used by everyone.
and you also need the tools for building manually like, node js or yarn
and a code editor, I use visual studio code for modifying the theme
in the source folder GDevelop-master\newIDE\app\src\UI\Theme
you will have to modify index.js to declare a new theme
in this example moon theme is the new theme


you basically need to import the theme from the new theme folder and declare it as seen above
and you also need a separate folder for the theme (you can copy and paste the default dark theme for reference)
And open the index js file in the new theme folder to modify colors and
rename somethings to your theme name
replace all text with dark-theme to (theme name)-theme
also, do it for the css files in the new theme folder
(you can replace all the text by pressing ctrl+ f (in windows) and put the text and press the replace buttton )
Record_2020_04_15_15_38_05_448
and if you want to edit colors you need a hex color value (you can find even in gdevelop a hex color value)Record_2020_04_15_15_21_48_951
and for testing you need to open your command prompt in windows or terminal in Linux and macOS
change your directory to GDevelop-master\newIDE\app using cd command
and enter yarn(if you installed yarn) or npm i (if you installed node js) in the command line
await everything set up and enter yarn start or npm start to test the app in your browser

a more detailed building tutorial can be found in GDevelop/README.md at master · 4ian/GDevelop · GitHub

so, in opinion, editing a theme for gdevelop 5 requires a lot of setting up and some knowledge of programming, but it’s not that hard if you already have some experience.

1 Like

Wow, thankyou for going through how to do this in depth.

1 Like