Search Unity

Theme and variables

Discussion in 'UI Toolkit' started by Arkuni, Nov 3, 2019.

  1. Arkuni

    Arkuni

    Joined:
    May 30, 2013
    Posts:
    58
    Is there or will there be a way to use variables in USS ala SASS?

    So let's say I want to make a light theme, and a dark theme. Let's also say that I have a concept of a primary color and a primary-text-contrast color. Both properties are applied to a wide range of components, and I want to make it possible to change it with one-two line of code.

    I realize that this can be done with inline styling or making checks on which class to apply according to theme settings. I consider inline styling a non-choice for modern development, and the second one is a chore.
     
    Arkuni, Nov 3, 2019
    #1
    jGate99 likes this.

  2. alexandred_unity

    alexandred_unity

    Unity Technologies

    Joined:
    Dec 12, 2018
    Posts:
    43
    Hi Arkuni, USS supports variables using the var() function since 2019.3.
    For example, you could have your USS files defined like this:
    MyCommon.uss
    -------------------
    .my-class {
    color: var(--primary-text-contrast-color);
    background-color: var(--color-primary);
    }

    MyDark.uss
    ----------------
    * {
    --color-primary: black;
    --primary-text-contrast-color: white;
    }

    MyLight.uss
    ----------------
    * {
    --color-primary: white;
    --primary-text-contrast-color: dark;
    }

    In code, you just need load either MyDark.css or MyLight.css and then MyCommon.css.
     
    Last edited: Nov 4, 2019
    alexandred_unity, Nov 4, 2019
    #2
    StephanieRowlinson and BinaryCats like this.

  3. MoruganKodi

    MoruganKodi

    Joined:
    Feb 11, 2015
    Posts:
    79
    pls document this
     
    MoruganKodi, Nov 5, 2019
    #3

  4. alexandred_unity

    alexandred_unity

    Unity Technologies

    Joined:
    Dec 12, 2018
    Posts:
    43
    Indeed, it will be documented. However, you should already be able to google about it as our variable support follows the CSS specification.
     
    alexandred_unity, Nov 5, 2019
    #4

  5. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    649
    Can this be supplied through asset bundles? Can this handle changing the layout, like positioning? Could we create an inventory system, or dialog player, etc, that can be used in different projects, and then re-skin/layout by choosing which .uss file to use? IE: one game wants the inventory horizontal on the bottom with X skin, and another wants the inventory vertical on the left with Y skin.
     
    DGordon, Jun 1, 2021
    #5

  6. Leslie-Young

    Leslie-Young

    Joined:
    Dec 24, 2008
    Posts:
    1,148
    You define variables like this

    :root {
    --color-text: rgb(255, 255, 255);}
    }

    Put only that in different USS documents and decide which one to load at runtime.
    Your other USS that are specific to elements could use the variable like this..

    .some-ele {
    color: var(--color-text);
    }

    Applying a specific stylesheet in C#

    [SerializeField] private UIDocument doc;
    [SerializeField] private StyleSheet variablesSheet1;
    [SerializeField] private StyleSheet variablesSheet2;

    ...
    ...

    doc.rootVisualElement.styleSheets.Add(variablesSheet1);
    or
    doc.rootVisualElement.styleSheets.Add(variablesSheet2);
     
    Leslie-Young, Jun 1, 2021
    #6
    Lars-Steenhoff likes this.