Search Unity

Feedback Specifying styles (uss) in UXML file

Discussion in 'UI Toolkit' started by Kichang-Kim, May 14, 2019.

  1. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    1,012
    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.
     
    Kichang-Kim, May 14, 2019
    #1

  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    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.

    Code (CSharp):
    1. <UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    2.     <VisualElement>
    3.         <Style path="Assets/SampleCanvas.uss" />
    4.         <Label text="Canvas Contents:" class="canvas-contents" />
    5.         <VisualElement name="sample-canvas" style="border-width: 20px; border-color: rgb(160, 96, 0);">
    6.             <Button name="canvas-button" text="Canvas Button!" class="sample-button canvas-button" />
    7.             <uie:IntegerField name="canvas-field" label="Some Integer Field" value="42" />
    8.         </VisualElement>
    9.     </VisualElement>
    10. </UXML>
     
    uDamian, May 14, 2019
    #2
    wang37921 and Kichang-Kim like this.

  3. LorenzoValente

    LorenzoValente

    Joined:
    May 2, 2019
    Posts:
    37
    @uDamian answer is probably outdated, the style file should be defined in the src attribute, not path:
    Code (CSharp):
    1. <Style src="Assets/SampleCanvas.uss" />
     
    LorenzoValente, Jan 27, 2021
    #3

  4. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    Correct. path still works but src is the new preferred attributes (with more abilities than path).
     
    uDamian, Jan 27, 2021
    #4

  5. LorenzoValente

    LorenzoValente

    Joined:
    May 2, 2019
    Posts:
    37
    Is there a way to specify conditional stylesheet based on current editor theme (dark/light)?
    Something like this:
    Code (CSharp):
    1. <Style src="Assets/SampleCanvas_dark.uss" theme="dark" />
    2. <Style src="Assets/SampleCanvas_light.uss" theme="light" />
    PS. The path attribute does not work in my case, only src does
     
    LorenzoValente, Jan 29, 2021
    #5

  6. Kerihobo

    Kerihobo

    Joined:
    Jun 26, 2013
    Posts:
    65
    Yes, please, I really want this
     
    Kerihobo, May 2, 2022
    #6

  7. griendeau_unity

    griendeau_unity

    Unity Technologies

    Joined:
    Aug 25, 2020
    Posts:
    248
    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.
     
    griendeau_unity, May 2, 2022
    #7