> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.
# Styling Apps
> Use Omni's design system CSS variables and your organization's custom theme to build Apps that match your branding and adapt to light and dark mode automatically.
[Apps](/visualize-present/apps) automatically have access to Omni's design system CSS variables and your organization's [custom theme](/administration/themes/application). 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()`:
```html theme={null}
Styled with Omni's design system.
```
## 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 ``:
* `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:
```css theme={null}
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 `` when your [organization has an active custom theme](#organization-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](/administration/themes/application), 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:
| Variable | Themed setting |
| ------------------------- | ------------------- |
| `--color-primary` | Primary color |
| `--color-text-on-primary` | Primary text color |
| `--color-notification` | Notification color |
| `--color-action-border` | Action border color |
| `--color-action-text` | Action text color |
| `--font-body` | Body font |
| `--font-heading` | Heading font |
[Custom themes](/administration/themes/application) 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
| Variable | Description |
| -------------------------- | -------------------------------------------------------------------- |
| `--color-background` | Page background; white in light mode |
| `--color-background-alt` | A subtly contrasting background, for sectioning |
| `--color-surface` | Surfaces that sit on top of the background, such as cards and panels |
| `--color-elevated-surface` | Raised 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:
| Variable | Description |
| ------------------------- | --------------------------------------------------- |
| `--color-text1` | Lowest contrast; secondary or muted text |
| `--color-text2` | Muted text |
| `--color-text3` | Standard body text |
| `--color-text4` | Highest contrast; headings and emphasis |
| `--color-text` | Black in light mode, white in dark mode |
| `--color-text-inverse` | Text on inverted backgrounds |
| `--color-text-on-primary` | Text placed on top of [`--color-primary`](#buttons) |
### Borders
| Variable | Description |
| ----------------- | --------------- |
| `--color-border1` | Lightest border |
| `--color-border2` | Medium border |
| `--color-border3` | Heavy border |
| `--color-border4` | Heaviest border |
### Buttons
| Variable | Description |
| ----------------- | ------------------------------------------------------------------------------------------------ |
| `--color-primary` | The primary-action color. Pair it with [`--color-text-on-primary`](#text) 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
| Variable | Description |
| ---------------- | ----------------------------------------------------------------------------------------- |
| `--font-body` | Body font. Defaults to `system-ui, sans-serif`; overridable by your organization's theme. |
| `--font-heading` | Heading font. Defaults to `system-ui`; overridable by your organization's theme. |
| `--font-code` | Monospace 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`).