Search Unity

Built-in Styles

Discussion in 'UI Toolkit' started by vertxxyz, Feb 8, 2019.

  1. vertxxyz

    vertxxyz

    Joined:
    Oct 29, 2014
    Posts:
    109
    IMGUI had a wealth of helpful built-in styles (especially those in EditorStyles), is there a resource that can be used to discover such styles in UIElements?
    Or are you expected to reimplement such styles yourself every time - now you have access to slightly more straightforward styling accessors (and sheets)?
    Seeing as the only way I know of supporting both dark and light skins with sheets is by having two and loading them based on the set value, the amount of work to set up such basic styles can be rather large.

    There is also the option of hunting around in each of the implemented controls for the appropriate style you want, which can again be tedious and hard to know what's implemented where without examples.
     
    Last edited: Feb 8, 2019
    vertxxyz, Feb 8, 2019
    #1

  2. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    398
    Unfortunately, such a handy list is now available yet. In the meantime, hunting down the styles from the built-in controls is the way to go. One possibility would be to add a control you'd like to your window, open the UIElements Debugger and view the list of defined classes for that element.

    DefinedClasses.png

    Another way would be for you to print the values for the static strings in the built-in controls. For instance the Foldout class:
    has Foldout.ussClassName, Foldout.contentUssClassName and Foldout.toggleUssClassName

    A quick search in the scripting API reference will let your discover a few.

    There is a better UI Samples window in the works that will help you discover these styles in the future. I'll reply back once we have a better source for this information.

    Thanks for the feedback!
     
    uMathieu, Feb 11, 2019
    #2

  3. vertxxyz

    vertxxyz

    Joined:
    Oct 29, 2014
    Posts:
    109
    Thank you,
    It's good to know there's a UI Samples window coming, that should help hunting around a lot.

    Is the loading of stylesheets for dark and light mode done by just switching between two sheets at load time, or is there a nice way to switch in a sheet, or any other method?
     
    vertxxyz, Feb 12, 2019
    #3

  4. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    398
    The most efficient way to do it is, to have 2 stylesheets for dark and light skin, then switch between the 2:
    Code (CSharp):
    1. if (EditorGUIUtility.isProSkin)
    2.      myVisualelement.styleSheets.Add(myDarkStyleSheet);
    3. else
    4.     myVisualelement.styleSheets.Add(myLightStyleSheet);
    5.  
    Another way, which is easier to type but will come at a cost at run time, is to add a "dark-style" or "light-style" class to your common-ancestor element then have both selectors listed in the same stylesheet:
    .dark-style #myelement{...}
    
.light-style #myelement{...}

    Please be aware that descendent selectors like this are not very efficient. I would advise against this for complex windows where performance is important.
     
    uMathieu, Feb 12, 2019
    #4

  5. vertxxyz

    vertxxyz

    Joined:
    Oct 29, 2014
    Posts:
    109
    Could you have a structure like:
    Code (CSharp):
    1. myVisualElement.styleSheets.Add(myCommonStyleSheet);
    2. myVisualElement.styleSheets.Add(EditorGUIUtility.isProSkin ? myDarkSpecificStyleSheet : myLightSpecificStyleSheet);
    That way you only have to put dark and light specific stylings in their sheets, but general sizing, scaling, flex, etc can go in common.
    Having this duplicate CSS lying around seems painful :/ but I imagine a solution like this only really has problems when the common and specific have duplicate elements that may fight.
     
    Last edited: Feb 13, 2019
    vertxxyz, Feb 13, 2019
    #5

  6. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    398
    That's exactly how we do things internally.
     
    uMathieu, Feb 13, 2019
    #6
    vertxxyz likes this.