> ## 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.

# Application theme settings

> Configure application theme settings in Omni, including navigation colors, fonts, dark mode, branding, and theme import/export.

<Note>
  **Organization Admin** permissions are required to access and modify application theme settings.
</Note>

Settings in the **Settings > Theme > Application** tab control the appearance of your Omni instance, including enabling light and dark mode.

## Customizing your theme

<Tip>
  **Want to speed things up?** Use the [Theme Lab](https://omni-theme.pages.dev/) to upload an image and generate a starting color palette for your theme. **This feature is experimental and may change.**
</Tip>

<Steps>
  <Step>
    Navigate to **Settings > Theme > Application tab**.
  </Step>

  <Step>
    Update the [available theme settings](#available-settings) to your liking.
  </Step>

  <Step>
    **Optional**: [Preview the theme](#previewing-the-theme) before saving.
  </Step>

  <Step>
    Click **Save** when finished. All changes will be immediately applied for internal and (if applicable) embed users.
  </Step>
</Steps>

## Importing and exporting theme configuration

To export or import theme configurations, scroll to the bottom of the **Application** tab and click the <Icon icon="ellipsis-vertical" /> menu.

* **Export** downloads the current theme as an `application-theme.json` file. All theme properties are included; properties that have not been customized are exported as `null`.
* **Import** opens a dialog where you can paste JSON or upload a `.json` file. You can also drag and drop a `.json` file directly onto the settings form. Properties not included in the imported file are reset to defaults. Changes are not saved automatically — click **Save** after importing.

The JSON format uses `styles` for light mode and `stylesDark` for dark mode. The `assets` and `assetsDark` keys contain branding asset URLs. All keys are optional; missing keys default to empty. Color values must be CSS color strings or `null`, and asset URLs must be HTTPS URLs or `null`.

```json theme={null}
{
  "styles": {
    "primary-color": "#271126"
  },
  "stylesDark": {
    "primary-color": "#FFFFFF"
  },
  "assets": {
    "logo": "https://example.com/logo.png",
    "wordmark": "https://example.com/wordmark.png"
  },
  "assetsDark": {
    "logo": "https://example.com/logo-dark.png",
    "wordmark": "https://example.com/wordmark-dark.png"
  }
}
```

## Previewing the theme

Click **Preview theme** to open a live side-by-side preview of your theme in light and dark mode before saving. The preview includes a mock navigation sidebar, draft banner, primary button, and heading text with any custom fonts applied.

## Restoring factory defaults

To reset all theme customizations to Omni defaults, click the <Icon icon="ellipsis-vertical" /> menu and select **Restore factory defaults**. Click **Save** to persist the reset.

## Available settings

### Color scheme (light and dark mode)

These settings control whether users see light mode, dark mode, or the system default, and whether they can override the instance-wide choice.

| Setting                     | Description                                                                                                                        |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Default color scheme**    | Defines the default color scheme - **Default**, **Light**, or **Dark** - for the instance. Click **Change** to save the selection. |
| **Allow user color scheme** | Allows users to select their preferred color scheme for the Omni instance.                                                         |

### Styles

Each color property can be set independently for light and dark mode. If only one mode is customized, the other mode retains its default colors.

#### Interactive colors

Interactive colors affect primary buttons (such as **Run** and **Save**), outline and transparent buttons, draft and editing banners and indicators, branch bar styling, and notification badge dots.

| Setting                | Description                                                                                                                                       |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Action border**      | Border color for outline and transparent buttons throughout the UI                                                                                |
| **Action text**        | Text and icon color for outline and transparent buttons                                                                                           |
| **Primary color**      | Color for primary buttons and interactive elements (for example, **Run** and other action buttons)                                                |
| **On primary**         | Text and icon color displayed on top of primary-colored elements                                                                                  |
| **Editing color**      | Color for draft and editing indicators, including the draft banner, edit mode buttons, and branch indicators. Defaults to the system draft color. |
| **On editing**         | Text color displayed on editing-colored elements, such as text on draft banners and tokens                                                        |
| **Notification color** | Color for notification badges and indicator dots throughout the UI. Defaults to `#ff4794`.                                                        |

#### Navigation colors

Navigation colors affect the left navigation sidebar and dialog navigation panels, such as the **Settings** sidebar. You can control the appearance of items in their default, hover, and selected states.

<Note>
  Dialogs with navigation sidebars, like **Settings**, automatically respect your navigation color choices — no separate configuration is needed.
</Note>

| Setting                   | Description                                                 |
| ------------------------- | ----------------------------------------------------------- |
| **Background**            | Navigation sidebar background color                         |
| **Background (hover)**    | Background color when hovering over navigation items        |
| **Background (selected)** | Background color for the currently selected navigation item |
| **Text**                  | Default text color in the navigation sidebar                |
| **Text (hover)**          | Text color when hovering over navigation items              |
| **Text (selected)**       | Text color for the currently selected navigation item       |
| **Icon**                  | Default icon color in the navigation sidebar                |
| **Icon (hover)**          | Icon color when hovering over navigation items              |
| **Icon (selected)**       | Icon color for the currently selected navigation item       |

<h3 id="branding-assets">
  Branding assets
</h3>

Custom branding assets allow you to replace the default Omni logo and wordmark with your own brand assets throughout the Omni interface. Assets can be customized separately for light and dark modes, with automatic fallback when only one mode is configured.

<Note>
  Custom branding asset images must be:

  * Specified using an HTTPS URL
  * In a web-compatible format such as PNG, SVG, JPG, etc.
  * Publicly accessible
</Note>

| Setting                  | Description                                                                                                                                                                |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Logo**                 | Square brand mark displayed in the header at 24×24px. Typically used for icons or compact logo designs. Appears in the navigation header across all page types.            |
| **Logo (dark mode)**     | Alternative logo for dark mode. If not provided, the light mode logo will be used in dark mode.                                                                            |
| **Wordmark**             | Horizontal brand text or logo displayed in the header at 100×24px. Best for text-based logos or wider brand marks. Appears alongside or instead of the logo in the header. |
| **Wordmark (dark mode)** | Alternative wordmark for dark mode. If not provided, the light mode wordmark will be used in dark mode.                                                                    |

#### Using custom assets in embedded applications

When custom branding assets are configured, they appear in application mode embeds where the default Omni branding is normally hidden. This allows you to maintain your brand presence in embedded analytics experiences.

* If a custom logo is set, it replaces the <Icon icon="bars" iconType="solid" /> menu icon in application mode embeds
* Custom wordmarks are also displayed in embed contexts
* Assets automatically adapt to the user's color scheme (light or dark mode)

### Fonts

Currently, only publicly-accessible [WOFF2 formats](https://www.w3.org/TR/WOFF2/) are supported.

| Setting     | Description                                                                                                                                        |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading** | Font used for page titles, dialog titles, Markdown headings, and dashboard tile headings. Must be a valid URL to a publicly-accessible WOFF2 file. |
| **Body**    | Main font used throughout the application UI. Must be a valid URL to a publicly-accessible WOFF2 file.                                             |

## Related

* [Document theme settings](/administration/themes/documents) - Customize the look and feel of your Omni content