DocumentationTheme
UI Colors
Setting | Description |
|---|---|
Text | Color for most texts. |
Background Tint | Color for dashboard background. This color is used to derive most colors that make up the general UI, |
Accent 1 | Color for important elements, such as the current navigation item in any navigation, save buttons in dialogs or the widget drawer icon in the edit mode. |
Accent 2 | Color for less important actionable items, such as help- and description-bubbles or minor actions in widgets (like “reset filter” in the filter matrix). |
State Colors
Setting | Description |
|---|---|
Ok | Color for objects in state OK. For more information visit the Engine Documentation. |
Warning | Color for objects in state Warning. For more information visit the Engine Documentation. |
Minor | Color for objects in state Minor. For more information visit the Engine Documentation. |
Major | Color for objects in state Major. For more information visit the Engine Documentation. |
Maintenance | Color for objects in state Maintenance. For more information visit the Engine Documentation. |
No Data | Color for objects in state No Data. For more information visit the Engine Documentation. |
Undefined | Color for objects in state Undefined. For more information visit the Engine Documentation. |
Using theme colors in custom CSS
All of the colors defined in the theme section (and many in-between colors) are available to be used in CSS via custom properties. Use these values using the var(--custom-name) syntax.
--color-min --color-max --color-background --color-background-dim --color-area --color-area-accent-1 --color-area-accent-2 --color-area-major --color-area-dim --color-area-dim-accent-1 --color-area-dim-accent-2 --color-area-dim-major --color-area-dimmer --color-line --color-line-dim --color-line-dimmer --color-text --color-text-ui --color-text-dim --color-text-accent-1 --color-text-accent-2 --color-text-ok --color-text-warning --color-text-minor --color-text-major