UI Toolkit Editor: Handling light and dark theme for custom elements

Unity Engine
, , , ,
1

Hey there!

I have been looking around for the best practices regarding the handling of dark and light theme for UI toolkit in an editor window, but I can’t seem to find any satisfying answer. It always feel like I’m just missing something.

I reach out here to see if anyone could share their experience on the subject.

On my end, I have looked a bit into Theme Style Sheet, but for a lack of concrete implementation of it, I really can’t wrap my brain around the actual usage of it over a USS file.

Solution #1
I have thought about having an observer of sort that would be subscribed to by every visual element that needs to be told when to switch to light or dark.
The issue I have with this is the clutter caused by the multiple USS files dictating each element’s light and dark setup.

Solution #2
Delegating the dark and light background colour themes handling to a shared preset such that a visual element can subscribe to a background colour category to update its theme from from. The background colour is thus being toggled between the light and dark classes of that category when appropriate for every visual element subscribed to said category.
The issue with this being the restrictive categorization and unlikely scalability in the event of an increasing amount of custom visual elements.
Another issue being that, given a UXML file nested within another UXML file, it becomes a hassle to visualize the theme change easily. That is in contrast to the first investigation where both files would always be part of the UI builder for their respective UXML file.

2

Take a look at the style sheet variables support.
Typically you have a general use style sheet which uses variables for parts that will change when in dark/light mode. You can then load in the additional dark/light mode style sheet with the general one.

  graph TD;
      General-->Dark;
      General-->Light;

General.uss

.my-class {
    background-color: env(--my-class-background-color);
}

Dark.uss

:root {
  --my-class-background-color: blue;
}

Light.uss

:root {
  --my-class-background-color: white;
}

Then load them

element.styleSheets.Add(generalStyleSheet);
if (EditorGUIUtility.isProSkin)
    element.styleSheets.Add(darkStyleSheet);    
else
    element.styleSheets.Add(lightStyleSheet);
1 Like
3

Thanks for the input.

That is also the solution I ended up going for in the end.

I wasn’t sure about it at first due to the tediousness of the whole process, but there is no “fun” process for that kind of work, unfortunately.

Better go with the standardized process in this case!

Cheers.

2 Likes
4

I believe this topic should have been added in UITK Documentation as a seperate part and could be named as “Support theme switches”. Also people confuse with TSS a lot because of it’s name.
I agree with the owner of topic that TSS’s are really confusing and beginner like me still dont know where could i use TSS’s.

It would be cool if UXML Builder had supported inspector theme switch so we wouldnt need to write the same code over and over again for every custom element we create.

I think theme support deserves an improvement. Likely the Unity’s Editor should have been supported editor stylization but still it lacks…