Color Scheme Preview

How to browse and preview color schemes using the Design Token Panel's Color tab.

Overview

The color scheme preview lets you browse 50+ preset color schemes and apply them to your site in real-time. This functionality lives on the Color tab of the Design Token Panel, via a “Scheme…” dropdown in the tab header.

How It Works

When the Design Token Panel is enabled, switch to the Color tab and use the “Scheme…” dropdown. It lists all available preset schemes. Selecting a scheme:

• Loads all of the preset’s palette, base, and semantic colors into the tweak state
• Applies the colors to the page immediately
• Persists the choice in localStorage so it survives page reloads and navigation
• Does not modify any source files — the change is client-side only

After loading a preset, you can further tweak individual colors as needed using the tab’s color pickers.

Enabling the Design Token Panel

Set designTokenPanel to true in src/config/settings.ts:

export const settings = {
  designTokenPanel: true,
  // ...
};

When enabled, a palette icon appears in the header bar. Clicking it toggles the panel open/closed. The “Scheme…” dropdown is on the Color tab.

Available Color Schemes

The panel includes 50+ preset color schemes such as Dracula, Nord, Solarized Dark, Solarized Light, Catppuccin Mocha, Catppuccin Latte, Tokyo Night, Gruvbox Dark, GitHub Dark, GitHub Light, and many more.

Bundled schemes (those included in your project’s color-schemes.ts) appear first in the dropdown, followed by a separator and the remaining presets.

Each scheme specifies a 16-color palette, background/foreground colors, selection colors, a Shiki code highlighting theme, and optional semantic color overrides.

See Also

• Design Token Panel — interactive tabbed editor for spacing, font, size, and color tokens