How to select builtin icon select between with dark to light theme in uss?

Unity Engine
1

I need put an builtin icon into a button, so I use ‘resource’ funciton and write uss like this:

.tab-img-editor
{
  background-image: resource("d_UnityLogo");
  width: var(--unity-metrics-single_line_small-height);
  height: var(--unity-metrics-single_line_small-height);
  align-self: center;
}

.tab-img-standalone
{
  background-image: resource("d_BuildSettings.Standalone.Small");
  width: var(--unity-metrics-single_line_small-height);
  height: var(--unity-metrics-single_line_small-height);
  align-self: center;
}

The buildin icon has the dark version(which prefix with ‘d_’) and light version. But I can not find a way to select the icon between dark and light theme.
Is there a solution? Thanks.

2

Is there any solution to select the icon by the editor theme?

3

The easiest way to support this would be to use a variable and define its value in two different style sheets, one for the dark mode and one for the light mode. Then, in your control, you can add the correct style sheet based on ```
EditorGUIUtility.isProSkin


```csharp
// main.uss
.tab-img-editor
{
    background-image: var(--custom-unity-logo);
}

// main_dark.uss
:root
{
    --custom-unity-logo: resource("d_UnityLogo");
}

//main_light.uss
:root
{
    --custom-unity-logo: resource("UnityLogo");
}
4

Is it recommend to load stylesheet from C# code?
In most of the times I reference the stylesheet from uxml by using .

5

We don’t have a way to have optional or contextual stylesheets in the UI Builder / UXML at the moment. So if you need to have styling specific for light and dark modes, you will need to handle that manually, either by:

  • Adding the style sheets through C# code (works well with custom controls)
  • Adding the style sheets in the UI Builder (with the drawback that you can only support a single mode at a time, you will still need to deal with that manually somewhere)

One middle ground I usually use is to create a custom control that simply deals with adding the correct style sheets at the root of the document. It’s a small overhead that reduces the amount of manual handling I need to make.

In any case, this is a limitation of our current style sheet workflows and it is definitely something we plan to improve.

1 Like
6

Hey, is this still the case? Or has a better workflow been introduce now? And what about supporting retina icons?

2 Likes
7

Yes it would be good if there was at least an exception for Light/Dark to auto detect.