In a UI theme, how do I select what style to use for an asset in the editor?

Love_Friberger · March 7, 2025, 9:54pm

Godot Version

4.4 Mono

Question

I’m trying to wrap my head around the UI theme system and can’t seem to figure this out. I have multiple types of panels that I want to all look different. I have created a theme, and in that theme, under the type Panel I’ve created several styles of panel. I add the theme to a panel in the editor and under the resources I can see the styles I’ve created, but I cant seem too find a way to set that panel to use a certain style. How is this done in the editor?

r?

jesusemora · March 7, 2025, 10:41pm

1 - only the first node needs a theme, all the children and children of children will inherit the same theme. knowing this can save you a lot of time.
2 - for making a button that is different you have to create a variation. you press the + button and type a name that doesn’t exist, like "red_button" then in the wrench tab you set what type of node this has to be. for example button.
then in the inspector, in theme, there’s a type variation box, there you type the name of the variation (click the pencil icon). if the names match the button will be changed to that variation and you will see it in editor and game.

Love_Friberger · March 8, 2025, 9:49pm

Thank you, this solved it. I think the flow is a bit unintuitive, but i guess thats the way it is!

jesusemora · March 9, 2025, 1:32am

I opened an Issue in proposals:

github.com/godotengine/godot-proposals

allow selecting theme_type_variations from current control theme in inspector

opened 01:22AM - 09 Mar 25 UTC

Jesusemora

### Describe the project you are working on 3D game ### Describe the problem o…r limitation you are having in your project usage of theme type variations is un-intuitive and the workflow is bad. after creating a theme variation in theme, in order to assign it to a control node that inherits the theme, you need to edit the field and manually type the name of the variation. there is a combobox next to it but it is always empty. ![Image](https://github.com/user-attachments/assets/888dd233-963b-4caa-a5a5-bb0105e0dca7) ![Image](https://github.com/user-attachments/assets/18358fe7-155c-4357-8497-b0c0ca7e6eef) ### Describe the feature / enhancement and how it helps to overcome the problem or limitation have the node display the variations. I have no idea how the inspector works, but the node is displayed in the editor window with its theme, so there must be a way for the inspector to access the variations set in the control that is inherited by the selected node. ### Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams in line 449 of godot/scene/gui/control.cpp there is the following comment: ```C++ // Only the default theme and the project theme are used for the list of options. // This is an imposed limitation to simplify the logic needed to leverage those options. ``` and then it gets the theme variation names from a singleton: ```C++ ThemeDB::get_singleton()->get_default_theme()->get_type_variation_list(get_class_name(), &names); if (ThemeDB::get_singleton()->get_project_theme().is_valid()) { ThemeDB::get_singleton()->get_project_theme()->get_type_variation_list(get_class_name(), &names); } ``` it seems what we need is a way to access the variations that are inherited by the selected node, or to change the way themes work to make them accessible to at least the nodes in the current scene that is being edited. could we use the get_root_parent_control method and get the theme variations that way? ``` Control *Control::get_root_parent_control() const { ERR_READ_THREAD_GUARD_V(nullptr); const CanvasItem *ci = this; const Control *root = this; while (ci) { const Control *c = Object::cast_to<Control>(ci); if (c) { root = c; if (c->data.RI || c->is_top_level_control()) { break; } } ci = ci->get_parent_item(); } return const_cast<Control *>(root); } ``` there's also `get_nearest_theme_context(Node *p_for_node)` in ThemeDB I think. The only reason I could think of for this not being done already would be performance. ### If this enhancement will not be used often, can it be worked around with a few lines of script? I don't think this can be solved with code, as it is part of the control node. ### Is there a reason why this should be core and not an add-on in the asset library? this is about improving the editor usability out of the box

if this doesn’t get solved I will try to do it myself. It’s just takes a lot of time and work to download the source code and then compile, find a solution and then test the changes, but I’ve done it before (once). the most difficult part is creating a fork in github.