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(): 
<style>
  .card {
    background-color: var(--color-surface);
    color: var(--color-text4);
    border: 1px solid var(--color-border1);
    border-radius: var(--radius-md);
    padding: var(--size4);
  }

  .card__primary-action {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
  }
</style>

<div class="card">
  <p>Styled with Omni's design system.</p>
  <button class="card__primary-action">Run</button>
</div>

​
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: 
body.prefers-dark .logo {
  /* show a light logo variant only in dark mode */
  filter: invert(1);
}
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:
VariableThemed setting
--color-primaryPrimary color
--color-text-on-primaryPrimary text color
--color-notificationNotification color
--color-action-borderAction border color
--color-action-textAction text color
--font-bodyBody font
--font-headingHeading font
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

VariableDescription
--color-backgroundPage background; white in light mode
--color-background-altA subtly contrasting background, for sectioning
--color-surfaceSurfaces that sit on top of the background, such as cards and panels
--color-elevated-surfaceRaised surfaces, such as menus and popovers
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:
VariableDescription
--color-text1Lowest contrast; secondary or muted text
--color-text2Muted text
--color-text3Standard body text
--color-text4Highest contrast; headings and emphasis
--color-textBlack in light mode, white in dark mode
--color-text-inverseText on inverted backgrounds
--color-text-on-primaryText placed on top of --color-primary

​
Borders

VariableDescription
--color-border1Lightest border
--color-border2Medium border
--color-border3Heavy border
--color-border4Heaviest border

​
Buttons

VariableDescription
--color-primaryThe primary-action color. Pair it with --color-text-on-primary for readable contrast.
--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

VariableDescription
--font-bodyBody font. Defaults to system-ui, sans-serif; overridable by your organization’s theme.
--font-headingHeading font. Defaults to system-ui; overridable by your organization’s theme.
--font-codeMonospace font, for code and tabular figures

​
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).