> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-gtmbot-restructure-dark-mode-docs-v2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Dark mode

> Define light and dark color values for your theme.

Your theme supports light and dark color modes. When dark mode is enabled, each color token has separate light and dark values.

## Adding dark mode

1. Open **Theme** in the top navigation
2. Click **Add dark mode** in the Colors section
3. Edit the dark value for each color token

Preview your designs in dark mode using the light/dark toggle in the toolbar.

## Removing dark mode

Click **Remove dark mode** in the Colors section. This deletes all dark color overrides.

<Warning>Removing dark mode is destructive. Use [version history](/learn/projects/version-history) to restore if needed.</Warning>

## Code export

When dark mode is enabled, the CLI generates your color tokens as CSS variables. Light mode values load by default, and dark mode values activate when a `dark` class is present on the page. Run the CLI to sync:

<CodeGroup>
  ```bash npm theme={null}
  npx @subframe/cli@latest sync --all
  ```

  ```bash yarn theme={null}
  yarn dlx @subframe/cli@latest sync --all
  ```

  ```bash pnpm theme={null}
  pnpx @subframe/cli@latest sync --all
  ```

  ```bash bun theme={null}
  bunx @subframe/cli@latest sync --all
  ```
</CodeGroup>

To add a dark mode toggle to your app, see the [Dark mode toggle](/guides/dark-mode) guide.