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

File management