Defining custom USS styles

The first step to define a USS style is to create a new stylesheet. Stylesheets can be used to extend the Editor’s visual appearance. This can be done by adding a file named common.uss in an Editor folder in a StyleSheets/Extensions folder hierarchy. For example, the following locations are valid:

Assets/Editor/Stylesheets/Extensions/common.uss
Assets/Editor/MyFolder/Stylesheets/Extensions/common.uss
Assets/Editor/MyFolder1/MyFolder2/Stylesheets/Extensions/common.uss

USS files (for Unity Style Sheet) use a CSS-like syntax to describe new styles. Here is an example:

myStyle
{
    width:18px;
    height:18px;
    background-image: resource("Assets/Editor/icon.png");
}

In this style, we specified that we wish to use a custom icon along with size properties. USS styles also support pseudo-states, which works like pseudo-classes in CSS. Timeline markers support the following pseudo-states:

• Collapsed: .myStyle
• Normal: .myStyle:checked
• Selected: .myStyle:hover:focus:checked

USS stylesheets also support Unity's light and dark themes. Styles in files named dark.uss and light.uss will be used as an override of the style in common.uss. For example:

• common.uss

myStyle
{
   width:18px;
   height:18px;
   color: rgb(125, 125, 125);
}

• dark.uss

myStyle
{
   color: rgb(0, 0, 0);
   background-image: resource("icon_dark.png");
}

• light.uss

myStyle
{
   color: rgb(255, 255, 255);
   background-image: resource("icon_light.png");
}

In the dark theme, myStyle will be resolved to:

myStyle
{
   width:18px;
   height:18px;
   color: rgb(0, 0, 0);
   background-image: resource("icon_dark.png");
}

and in the light theme:

myStyle
{
   width:18px;
   height:18px;
   color: rgb(255, 255, 255);
   background-image: resource("icon_light.png");
}