Themes

The Unity Editor is available in two themes: light and dark. Theme selection is a personal preference. Users spend many hours in the Editor and using an appropriate theme option can greatly reduce eye strain in a given environment.

The Unity Editor is available in dark and light themes to support user preferences.

Variables

A variable is an identifier in the code that assigns a value. Colors are implemented using color variables so they can be easily changed. For example, each color variable has a light and dark value so that when the Editor theme is changed the UI will automatically update to the correct theme.
 
Avoid using hard-coded colors in Editor UI as hard-coded values will not change when colors are updated. Always style UI for the Editor using color variables rather than hexadecimal or RGBA color values directly. Many pre-existing variables are available. However, new variables can be created as needed.

Unity Variable Names

Unity uses a specific naming convention for built-in variables to indicate how they are used. A variable name consists of one or more parts, separated by hyphens. Each part consists of one or more words separated by underscores.
‍
Example of variable naming:
‍--unity-{group}-{role_and_control}-{sub_element}-{pseudo_state_sequence}

For example, the following variable name --unity-colors-button-text-hover provides the following information about how Unity uses the variable:

For more about built-in Unity variables go to Unity’s built-in style sheets

Pseudo-States

The pseudo-state sequence is a list of UI states that Unity uses a variable for.
‍
For example, when you see a variable name with the hover pseudo-state, it means Unity uses the variable in styles that affect elements when a user hovers the mouse pointer over them.
‍
Example: --unity-colors-toolbar_button-text-hover

A variable name can have more than one pseudo-state. Multiple pseudo-states appear in alphabetical order, separated by underscores.
‍
Example: --unity-colors-toolbar_button-text-focus_selected
‍
Unity variable names can have any combination of the following pseudo-states:
‍

Accented Borders

Accent borders are designed to inset and outset UI to support the layering of the user interface. This subtle increase in control differentiation has a considerable impact on usability. For example, the text field control is inset and has a different top border color.

Inset borders are used with Input Fields, outset borders are used on click controls.

Base Layers

Colors in the Editor are designed to leverage the real world of tactile objects and physical layering. Layers, like sheets of paper on a desk, are arranged one on top of another. This layering of UI and color is designed to support the information architecture and visual organization of content for optimal usability. Colors are layered from dark to light according to three base layers:

Colors are arranged from dark to light within three base layers.

Base 1 - Application Bar and Controls
Base 2 - Components and Windows
Base 3 - Toolbars and Toolbar Controls

Color variables in Frameworks

Color variables documented here are only applicable in IMGUI and UI Toolkit frameworks and are not intended to be used in Runtime.