USS variables to store common color values in Runtime

Unity Engine
1

I want to make a global style sheet for my app that contains all the colors in our theme and save them in variables.

I want to be able to use these color variables and assign them to any of properties I want like background-color, color, border-color etc.

What is the syntax to accomplish something like that?

2

Hello,

You can add a style sheet to the PanelRenderer which declares variables:

:root {
--my-color: #FF0000;
--my-asset: url("Assets/foo.png");
}

Which will make those variables available in all USS rules applying to elements in the UI (basically any descendant element of the one that has the style sheet declaring vars):

.my-element {
   background-color: var(--my-color);
}

We’re wrapping up the manual section for variables, stay tuned

2 Likes
3

As look would have it I’m currently implementing Pro/Basic styling so I am getting in the swing of USS vars. Can you declare a variable under an different selector than :root. I searched online for css, but it seems to be not common.

I have an editor with lots of different elements. I want a Selected color, different elements may have a different Selected color.
Am I just suppose to define the variables like this:

:root {
--selected-button: #FF0000;
--selected-thing:#FFFF00;
--selected-otherthing: #FFFFF0;
--selected-otherthing--hover: #FFFFFF;
--...
}

or is there a class based way to define the variables.

looking forward to the documentation :slight_smile:

4

Yes variables declarations can happen under any selector. It will make the property available in the element that matches the selector. In theory you can even have two different values for the same variable for two parallel subtrees.

1 Like
5

Hi all,

Just a quick note that the manual page for USS variables is live in the 2020.1 manual:

3 Likes