How can I add custom theme overrides?

Godot Version

v4.2.1.stable.official

Question

I am creating a plugin which exposes a few custom UI nodes. I want to expose a few theme properties like in this:

image

Basically I want the user to be able to provide them either via a theme or via the theme overrides. Then my custom node can retrieve the given style and apply it to it’s internal nodes. How would I do this?

To make it more clear what I’m trying to do, something like this pseudocode I guess:

@export_theme_color var danger: Color
@export_theme_stylebox var normal: Stylebox

No idea if this is even possible, so I’m also open to workarounds or other ideas to expose this in a way that feel intuitive for users of the plugin.

1 Like

so the question is, how would it be possible to make every single child (internal) nodes have the given theme/themeoverride properties from export?

I don’t even care if it’s via export syntax or something else, that was just an example to better show my intention.

The question is how to tell the engine that I have custom theme properties.

so the custom theme properties can be either from creating the new theme’s theme properties or from theme override, and somehow this custom node can know it all (what are all the theme properties has been added to this custom node child)?

oh so the theme and style can be taken from other nodes or any to this custom node and override the style/theme whatever nodes inside this custom node?

well so far none have been added as I don’t know how, but I would like to expose to the user:

  • styleboxes
  • fonts
  • colors

They should show up in the theme overrides section. That way I can simply use the standard methods to get a theme value by name, and Godot will automatically load it from the theme or the override (whatever the user provides). Godot has methods like get_theme_color() which will first look into the defined overrides, and then will look into the theme (going up the inheritance chain if none is specified for the current node, and if no node has one it will use the default theme specified in the project settings).

The part I struggle with is exposing my custom theme property names in the theme overrides section of the node itself.

Including custom stuff in themes works fine, as shown here:

image

But that still does not solve how to expose custom theme properties as available overrides.

that picture of “MyType” looks illegal, it’s not possible to add a node as a theme type in this current version right? or i’m missing something? so that’s what your plugin looks like?
if so, then wouldn’t it be if this MyType node has font color defined, then the label node who has this theme would just get the font color overrided?

You can add custom types via the theme editor in the current Godot version. You click on the small + symbol next to the list of types, and then type your custom name instead of selecting one of the built in nodes:


If I would use Label, sure. But I have a custom node inheriting from Container which applies the custom theme properties to it’s internal child nodes. Container has no pre-defined theme properties, so I want to provide my own.

i tested custom type theme and i dont see it changing font size or font color to any of its child, never really use custom theme before, i dont know others has used it many times or not…

As I said, it is used in conjunction with the API to get theme properties. Godot can’t know how your custom value is supposed to be used. So instead you need to code that by yourself, by using get_theme_color("test_color", "MyType") to get the value and then assign it to whatever you want to style with your custom theme property.

But again, that part works perfectly fine. What I’m struggling with is exposing custom overrides on a control node.

I was pointed at a proposal to make this possible: Introduce `ThemeDB`/`ThemeServer`, register theme properties with it to define stable theming API for controls and windows, allow to define theme properties in scripts · Issue #4486 · godotengine/godot-proposals · GitHub

So currently there is no way. It has to wait until the theme stuff is refactored into using the new ThemeDB.

I will use normal properties for now, and switch to custom theme properties once implemented.

1 Like

Any new update?

You can check out the github proposal linked above to track progress on this