How do you override a selector with Themes

[StripeGuy]

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?

[StripeGuy]

Bump.

[C-UITools]

Hello,

If I understand correctly, you use a TSS (let’s call it ParentTheme.tss for example) in your Panel Settings Asset or in the UI Builder. ParentTheme.tss imports both ThemeElements.uss and MyDarkTheme.uss. You have a class .theme_menu__border-color in ThemeElements.uss that you want to override in MyDarkTheme.uss.

Could you show me the contents of your ParentTheme.tss, particularly the import statements? I tried to recreate your example with the following code and it works fine:

ParentTheme.tss (remove the space before the @s)

@ import url("Child1TSS.tss");```

```Child1TSS.tss``` (your ThemeElements)
```.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);
}```

```Child2TSS.tss``` (your Dark Theme Sheet)
```:root {
--primary-color: rgb(255, 255, 255);
--secondary-color: rgb(0, 0, 0);
}

.theme_menu__border-color {
border-left-color: rgba(255, 0, 0, 0.5);
border-right-color: rgba(255, 0, 0, 0.5);
border-top-color: rgba(255, 0, 0, 0.5);
border-bottom-color: rgba(255, 0, 0, 0.5);
}```

I see the theme_menu__border-color from the second child, not the first one. __*Keep in mind that the last imported sheet will have precedence over the first imported sheet*__.

[StripeGuy]

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:

@import url("/Assets/UI Toolkit/UnityThemes/UnityDefaultRuntimeTheme.tss");
@import url("/Assets/_UI/Themes/ThemeElements.uss");
@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.

[C-UITools]

Sorry, at the time I has misread that “ThemeElements.uss” and “MyDarkTheme.uss” were TSS files

Seems like there was a conflict indeed with the way you imported that ThemeElements file. Let me know if that still doesn’t work and I will take another look at it!