86 lines
2.0 KiB
Markdown
86 lines
2.0 KiB
Markdown
# 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:
|
||
|
||
``` txt
|
||
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](https://docs.unity3d.com/Manual/UIE-USS.html). Here is an example:
|
||
|
||
``` css
|
||
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](https://docs.unity3d.com/Manual/UIE-USS-Selectors.html), which works like [pseudo-classes in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). 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`
|
||
|
||
``` css
|
||
myStyle
|
||
{
|
||
width:18px;
|
||
height:18px;
|
||
color: rgb(125, 125, 125);
|
||
}
|
||
```
|
||
|
||
- `dark.uss`
|
||
|
||
``` css
|
||
myStyle
|
||
{
|
||
color: rgb(0, 0, 0);
|
||
background-image: resource("icon_dark.png");
|
||
}
|
||
```
|
||
|
||
- `light.uss`
|
||
|
||
``` css
|
||
myStyle
|
||
{
|
||
color: rgb(255, 255, 255);
|
||
background-image: resource("icon_light.png");
|
||
}
|
||
```
|
||
|
||
In the dark theme, `myStyle` will be resolved to:
|
||
|
||
``` css
|
||
myStyle
|
||
{
|
||
width:18px;
|
||
height:18px;
|
||
color: rgb(0, 0, 0);
|
||
background-image: resource("icon_dark.png");
|
||
}
|
||
```
|
||
|
||
and in the light theme:
|
||
|
||
``` css
|
||
myStyle
|
||
{
|
||
width:18px;
|
||
height:18px;
|
||
color: rgb(255, 255, 255);
|
||
background-image: resource("icon_light.png");
|
||
}
|
||
```
|