How to make a Custom Theme in Godot

For Controls and other UI Nodes in Godot Engine there's an option to create a custom theme - the limits are only your imagination, drawing and designing skills. The way it's implemented is with the Themes. Theme is a Resource, like many others, that includes multiple styles for different Types - Button, Label, Checkbox, PopupMenu, Sliders, ScrollBar ect. Basically, I can set up a custom theme with the styles and fonts of my choice for UI Nodes I use in my project and then with a few clicks or with the code assign one Theme to all my Controls.

For this tutorial I'm going to use HSlider as an example. I will show how to create a new theme and customize how the slider looks using Theme Panel. By the way, I'm currently working on a tutorial on how to build a toggle switch using HSlider as a base Class. You might be interested if you want to use these types of UI elements.

Content:

• Accessing Theme Panel
• UI Node Type and its Items styles
• Type Items and styles overriding
• Summary

Accessing Theme Panel

• Click on your UI Node in Scene dock (HSlider in this case) and navigate to Control subcategory in the Inspector dock.

• To open Theme Panel click on [empty], choose New Theme, which will appear instead of [empty] and click on that New Theme resource. Theme panel opens

Once opened, Theme Panel appears as a tab underneath the main editor's window along with Output, Debugger...

UI Node Type and its Items styles

Next step is to choose the UI Type you want to customize a theme for. I use HSlider as an example here. Look at the picture above. On the left side in Theme Tab there's Type Picker which looks like a color picker. After clicking it you can choose one of the Types among those below in the scroll window. It's also possible to expand the tab: Expand button is located in the bottom right corner.

One more way to select Type is with this section here:

• Click on button and find the HSlider (or UI you want) in the list and add it:

HSlider appears as an item in the list of Types you've added. To customize the Type, navigate between the Tabs: Color item, Constant item, Font item, Icon item, StyleBox item:

Type Items overriding

Depending on the UI you're making a custom theme for, some of these tabs might have/not have data. For example, a slider doesn't have any text, only graphical elements and if you open Fonts tab it would be empty, however the Icon and StyleBox tabs are going to have data in them.

Let's say you want to change grabber and replace the default texture.

• Open Icon tab, click next to grabber. This will dismiss the default icon and let you set your own:

Next, you can choose the Texture resource for grabber.

• Click on [empty] and select New AtlasTexture in the list.

I usually use Atlas Textures as they are very easy and convenient to set up. To open the Texture panel click on newly appeared resource, instead of [empty].

• Drag and drop previously added image from FileSystem dock to Inspector dock assigning it to Atlas property:

To return back to Theme customizing panel click on Theme tab (this will normally leave the Texture panel opened in Inspector) or use the left arrow located in the uppermost section of Inspector dock.

• Repeat the process for grabber_disabled and grabber_highlight with the same or different image if your UI Type states have to look different.

Now, move to StyleBox - to the right of the Icon tab. The process is very similar:

• To override the default slider's main region texture, click and select New StyleBox Texture, then click on that texture. Next, drag and drop the image onto Texture property in Inspector:

There's also grabber area property along with the slider we've just dealt with. When I move the grabber this texture will cover the area between the starting point and the current one. I didn't need it.

• Use StyleBox Empty to get rid of that default texture (for highlight too).

Save your new Custom Theme with the Save As button:

Summary

The best part is that you can make one theme to use throughout the whole project: every UI Type is customizable. For example, change a button texture and font and you'll get a custom UI Button. The same for checkboxes, popup windows, process bars, color pickers and many other Types. I would recommend you to experiment with these things and see what you can achieve by changing their styles. It helps a lot to learn Theme Panel functionality, Custom Themes and the overall Godot Engine interface.

If you find this article useful, follow me on Instagram for more tips and learning materials.