Specifying styles (uss) in UXML file

Unity Engine
,
1

Hi, I have some feedbacks for UIElements, especially UXML.

If UXML supports direct specifying uss in UXML file, UIElements development flow can be more efficient.

Current, uss must be specified in C# code-side, so you can’t preview your UXML in Editor because it is shown in preview window with default inlineStyle.

Good example is the usage of HTML’s css.

So my suggestion is here:

Thanks.

2

This is already possible via the Style tag. It needs to be a child of an element (as it will add the StyleSheet to that element). It cannot be global to the entire UXML file.

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <VisualElement>
        <Style path="Assets/SampleCanvas.uss" />
        <Label text="Canvas Contents:" class="canvas-contents" />
        <VisualElement name="sample-canvas" style="border-width: 20px; border-color: rgb(160, 96, 0);">
            <Button name="canvas-button" text="Canvas Button!" class="sample-button canvas-button" />
            <uie:IntegerField name="canvas-field" label="Some Integer Field" value="42" />
        </VisualElement>
    </VisualElement>
</UXML>
2 Likes
3

@uDamian answer is probably outdated, the style file should be defined in the src attribute, not path:

<Style src="Assets/SampleCanvas.uss" />
4

Correct. path still works but src is the new preferred attributes (with more abilities than path).

5

Is there a way to specify conditional stylesheet based on current editor theme (dark/light)?
Something like this:

<Style src="Assets/SampleCanvas_dark.uss" theme="dark" />
<Style src="Assets/SampleCanvas_light.uss" theme="light" />

PS. The path attribute does not work in my case, only src does

6

Yes, please, I really want this

7

I don’t think there are plans for this in the short term, it would have to be done by code. There could be a check for EditorGUIUtility.isProSkin and add the correct stylesheet depending on the theme.

I’d say it works the other way around. You can link stylesheets in your custom theme file, under the Style Sheets section. But that is for runtime themes.