Themes in Godot 3

Themes in Godot 3 are a powerful way to skin your GUI. If you only have a couple of GUI elements, then creating a theme is probably overkill. But as soon as you have more GUI elements, I would always recommend working with themes. Here we will take a quick look at what themes basically are, what you can do with them, and how you can create them.

Dear reader, please consider supporting my game ❤

About the Godot Theme

If you already created a GUI element (for example a button) in the past, then you probably know, that you can give that button a unique look. You can give the button custom colors, a custom font, etc. so that it fits the style of your game. But if you make a new button, you have to assign all those custom things to that button again. This can quickly become a lot of work, especially to make sure all buttons look the same.

This is where Godot Themes come in very handy. Because you can create a theme, in this theme you can define how a button should look, and then apply that theme to any button. Voilà, now that button will look as you defined it in the theme. And the best thing: if you later decide, that you want your button to look different, just change the theme and that is it. Also, of course, themes don’t just work with buttons, but with just about every GUI element in Godot.

How to create Themes in Godot 3

Let’s take a look at how to create such a theme. First, create any GUI element, for example, a button. In the Inspector you will find Theme and there you can create a New Theme (Check out the screenshot).

Create a New Theme - Themes in Godot 3 — Create a New Theme

As with any resource in Godot, you can then save this theme, to use it for other GUI elements.

Next, we have to add the item, in our case the button. So you want to go to Edit theme… and click Add Class Items.

Chose the Button from the drop-down list and click Add All. On the right-hand side of the Inspector you now will find Colors, Constants, Fonts, and Styles. You can customize them just as you like. Don’t forget to save the theme, when you are done. Every GUI element that you add will show up in the Inspector and will be customizable. Now you can add this newly created theme to every button, and it will change its look accordingly. Also, every child node will automatically use the parent theme. If you change the theme, all buttons will change too.

Themes in Godot 3 are great for bigger projects

If you are working on bigger projects, I would always recommend using themes for your GUI elements. Once the theme is set up, it makes it easy to change the look of your GUI without a lot of extra work. Also, themes make sure, that your game has a consistent style. Fun fact: even the GUI of Godot itself uses the theme framework.