Question How do you override a selector with Themes

The way I'm doing my themes are as follows.

I have 3 files.
- A general USS file that links all elements in my UI I would like themed ("ThemeElements.uss").
- A "MyDarkTheme.uss" file that simply holds uss variables (see below for example).
- A Theme file (.TSS) that imports "ThemeElements.uss" and "MyDarkTheme.uss".

In "ThemeElements.uss", for example, I have my UI background selector set to a variable that each theme can use, and other common ui selectors that I want other themes to be able to override:

.theme_main__background {

    background-color: var(--primary-color);

}

.theme_menu__border-color {

    border-left-color: rgba(255, 255, 255, 0.5);

    border-right-color: rgba(255, 255, 255, 0.5);

    border-top-color: rgba(255, 255, 255, 0.5);

    border-bottom-color: rgba(255, 255, 255, 0.5);

}

In "MyDarkTheme.uss" theme file, all I have are root variables to change the theme colors. So intead of duplicating all selectors in each theme file, I can just change the colors for each element I've created a variable for:

:root {

    --primary-color: rgb(255, 255, 255);

    --secondary-color: rgb(0, 0, 0);

}

But in some themes, I need to override other elements, like ".theme_menu__border-color" for example. Simply adding ".theme_menu__border-color { ... } " to "MyDarkTheme.uss" file with different colors, doesn't override that element.


So how would I override a selector that's in another uss file?

 

Bump.

 

Hmm, maybe I"m doing it wrong? I only have 1 Theme file (.tss) at all times. I just change it in the Panel Settings depending on which Theme I want to use.

Panel Setings (Theme Style Sheet) -> Theme_DarkBlue.tss

In Theme_DarkBlue.tss:

Code (CSharp):

1. @import url("/Assets/UI Toolkit/UnityThemes/UnityDefaultRuntimeTheme.tss");
2. @import url("/Assets/_UI/Themes/ThemeElements.uss");
3. @import url("DarkBlue.uss");

Or visually:



ThemeElements.uss is where I manually added the classes to each Element in UI Builder that I want to be able to "Theme". (ex. MainMenu, MainMenu_button_color, AppBackground, etc...)

DarkBlue.uss contains only the Theme colors that are used as variables, AND any classes I want to overwrite.


Here's a diagram of my workflow and where I'm trying to overwrite the class.




IMPORTANT: Keep in mind that the overwrite does seem to work in the UI builder, but NOT in runtime or the game window.


Edit #2:

I think I figured it out. I realized something silly... I had my ThemeElements.uss file still added under my UI document in UI builder. So I was "inheriting" it in my Theme file AND I was also using it under the UI document. As soon as I removed it from the UI builder, it seems to show the overwritten changes! Your tip about the Order of the stylesheets in the theme file might have helped too. I still haven't tested it with a build, but I will report back if it doesn't work.