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.

Removing dark mode is destructive. Use version history to restore if needed.

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:

npm

npx @subframe/cli@latest sync --all

yarn dlx @subframe/cli@latest sync --all

pnpx @subframe/cli@latest sync --all

bunx @subframe/cli@latest sync --all

To add a dark mode toggle to your app, see the Dark mode toggle guide.