Color Scheme Preview

How to browse and preview color schemes using the Color Tweak Panel.

Overview

The color scheme preview lets you browse 50+ preset color schemes and apply them to your site in real-time. This functionality is built into the Color Tweak Panel via a “Scheme…” dropdown in the panel header bar.

How It Works

When the Color Tweak Panel is enabled, a “Scheme…” dropdown appears in the panel header bar. 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 panel’s color pickers.

Enabling the Color Tweak Panel

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

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

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

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

• Color Tweak Panel — for interactive editing of individual palette colors and semantic tokens in the browser