Skip to main content
Apps automatically have access to Omni’s design system CSS variables and your organization’s custom theme. Referencing these variables lets you build interfaces that match Omni’s look and feel, pick up your organization’s branding, and adapt to light and dark mode without wiring up any of it yourself.

​
How it works

The CSS variables for Omni’s defaults and your organization’s custom theme are automatically available and optional to use in apps. Apps that style themselves with hardcoded colors work unchanged, and Omni’s variables only apply where you reference them, so they can’t interfere with your own CSS.

​
Using CSS variables

Reference any of these variables as a standard CSS custom property with var():

​
Light and dark mode

The color variables are theme-aware: the same variable name resolves to a different value depending on the user’s color scheme. When a user switches between light and dark mode in Omni, the values update automatically — you don’t need to listen for any events or handle any messages. Under the hood, Omni sets a color scheme class on the app’s <body>:
  • prefers-light in light mode
  • prefers-dark in dark mode
You rarely need these classes directly, since the variables already adapt. Reach for them only when you want markup that differs beyond a color value:
Omni also adds an application-theme-{id} class to <body> when your organization has an active custom theme. This is what scopes your organization’s theme overrides; you generally won’t reference it yourself.

​
Matching your organization’s branding

When your organization has a custom theme, the following variables carry its brand values and fall back to sensible defaults otherwise. An app that uses these automatically matches the current Omni organization:
Custom themes are configured by Organization Admins in Settings > Theme. If your organization hasn’t set a custom theme, these variables will resolve to Omni’s defaults.

​
Variable reference

The variables below are the recommended set for app styling. They’re stable, always present, and adapt to light and dark mode.

​
Backgrounds and surfaces

Prefer --color-background for a clean look, and reach for --color-background-alt when contrast between sections helps the layout.

​
Text

Text colors run from lower to higher contrast:

​
Borders

​
Buttons

--color-primary is designed for primary buttons — avoid using it for general accents. If your design calls for a different button color, use your own value.

​
Fonts

​
Additional design system tokens

Omni also exposes the full design system for more advanced styling. These variables are less commonly needed but available:
  • Spacing — --size-unit (the 0.25rem base), the --size0 through --size24 scale, and the --height1 through --height8 vertical rhythm scale.
  • Border radius — --radius-xs, --radius-sm, --radius-md, --radius-lg, --radius-xl, --radius-round, and --radius-none.
  • Font sizes — --font-xxxs through --font-xxxxl, and line heights --line-height-xxs through --line-height-xxxl.
  • Elevation (shadows) — --elevation0 through --elevation4.
  • Intent colors — --color-info, --color-success, --color-warn, and --color-critical, each with tonal steps 1 through 4 (for example, --color-info1 … --color-info4).