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.
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 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
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:
While the Unity Editor as a whole follows principles of flat UI design, it introduces depth using different principles:
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.
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:
Base 1 - Application Bar and Controls
Base 2 - Components and Windows
Base 3 - Toolbars and Toolbar Controls
For more information go to Buttons ->
For more information go to Dropdowns ->
For more information go to Dropdowns ->
For more information go to Numeric Fields ->
For more information go to Search Fields ->
For more information go to Text Fields ->
For more information go to Numeric Fields ->
For more information go to Search Fields ->
For more information go to Text Fields ->
For more information go to Object Fields ->
For more information go to Sliders ->
For more information go to Tabs ->
