In-depth tutorials about UI theming

Help UI
, ,
1

Hello, I’m looking for an in-depth tutorial for everything about UI theming in Godot Engine, preferably video tutorials.

I’m trying to learn Godot by making a simple 2D application that offers customisable themes to the user. As such, I think it’d be efficient to allow controlling the theme through code. But I can’t comprehend how the Godot theming system is structured and designed.

Here are some examples that I’m struggling to understand–

  • To create a RedButton and a BlueButton variant theme of buttons, I thought it’d be a sub-feature of the Button theme under the main overall theme. But in practice, it’s opposite, you have to create a “FlatButton” theme for each variant and then select Button as the BaseType. It doesn’t feel intuitive.
  • Next, I thought of adjusting margins and separations with the same value across all UI nodes in a scene. But there’s no method to apply the separation through code into the main theme. I have to override the theme constants. I understand that they’re constants, but what should I do if I need the user to change separations and margins as per their needs?

I tried reading the documentation but I have to sift through so much information that I don’t need or won’t be useful for what I want to do. It took me so long to figure out that an unattached script can’t refer to nodes, and I’m still not sure if that is correct at all.

I need a tutorial that goes through common use-cases and shows the intended way of using Godot’s theming structure to achieve goals. If anyone knows of any such tutorials, please let me know here.

2

Have you checked the tutorial on godot docs?

It’s not very in-depth but it can be a good start. It also explains how Theme type variation works.

3

You can access the default theme via ThemeDB.

To create red/blue buttons, what Godot seems to want you to do is:

  • set everything up in the theme; font, font size, background colors…
  • one button type (maybe BlueButton?) can be the default
  • for the RedButton, override all the various style boxes (focused, pressed, normal…) with red versions

It’s a lot of manual work, but fortunately it can mostly be wrapped up in functions.

The theme “constants” aren’t; you can change them at runtime.