To style Control nodes, which are the foundation of most user interfaces in Godot, we can use a theme resource.
While we provide a theme for everything we are going to use in the upcoming lessons, you aren’t going to always have access to a ready-made theme catered to your exact game design.
This lesson is a quick hands-on guide to creating one. It will not be in-depth, but it will get you started.
A theme is a series of options and graphical styles for different aspects of a GUI node. For example, it’s the blue background of a window, the dark blue of a panel, the white vertical scroll bar of a list, a default font, so on and so forth.
Theme resources are useful because GUI children of a higher GUI node inherit the theme of their ancestor. That means we can provide the theme to the root node, and we know for a fact that, unless we give one of the children a different theme, they will all inherit the same styles.
You assign a theme resource into a node through its Theme property. We’ll do this in the next lesson when we begin creating the GUI nodes.
We provide the builder_theme.tres resource already for this project, but if you were to create a theme for your own game with its own distinct style, this is how you would go about it.
It starts its life like any other resource. You either create it in the FileSystem by right-clicking and choosing New Resource… and selecting Theme or create it from within a Control node’s Theme property as a new theme.
If you open the theme in Godot by double-clicking it in the FileSystem or by clicking it in the Inspector, Godot opens the Theme panel in the toolbar.
Godot has defaults that are part of the engine for each of the theme-able control nodes. Creating a theme means replacing those defaults with your own. You do this from the Edit Theme button in the top right of the Theme panel.
If you are going to edit everything about a given node, you can click Add Class Item and your theme will fill with all the constants, icons, styles, and colors of that node.
If you don’t intend on using all of them, that may be too much information that might go to waste. You can be more efficient by editing the parts you are using instead. For that, you can use the Add Item option.
The dialog for that one has you specify which Control you want to edit, which Data Type, and its name in the class. You can type in the names yourself if you know them, but the .. button on the side of Type and Name lets you pick from those Godot knows about.
Note that you must set the Data Type field at the bottom of the pop-up before variable names can appear in Name.
Most of the settings for Godot’s built-in controls are Styles and Constants.
Constants are variables that the control uses that you can edit in the Inspector, like a MarginContainer’s margins. Styles are the control’s base visuals, like Panel and PanelContainer’s background panel.
Styles are resources, too, and you assign them in the inspector when your theme is open. You can view the preview in the theme panel. Styles have many more options like Border, Shadow, and Color through which you edit them.
Let’s look at the theme we provided in the start project. You can double-click on builder_theme.tres in the FileSystem dock to open it in the inspector.
To maintain the flat colored blueprint look, I built the theme around flat backgrounds and blue color swatches. I made a series of StyleBoxFlat styles and assigned them to both Panel and PanelContainer. We’ll use Panel nodes for inventory slots, and the PanelContainer for windows.
I went with a light blue for panels and a transparent dark blue for windows, so we can see through them.
I repeated the process with the scroll bar Grabber, Grabber Highlight, Grabber Pressed, and Scroll styles. They also rely on flat colors, and I used the Corner Radius properties to round them out.
I also set the default font to use across the game in the Theme.
See the Shared/Theme/builder_theme.tres resource in the downloadable project to see how the theme works. I only configured the parts I needed specifically to keep the number of options low.