Color Tweak Panel

CreatedMar 22, 2026Takeshi Takatsudo

Interactive color scheme editor for live color customization.

Overview

The color tweak panel is an interactive editor that lets users modify all color values on the page in real-time. It opens as a fixed panel at the bottom of the viewport and provides controls for the 16-color palette, base theme colors, and semantic token overrides.

This is useful for:

Designing new color schemes visually instead of editing config files
Previewing how color changes affect the entire site
Exporting the result as a ColorScheme object to paste into src/config/color-schemes.ts

Enabling the 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 (to the left of the search icon). Clicking it toggles the panel open/closed.

📝 Note

The panel is an optional feature. When colorTweakPanel is false (the default), no panel code or FOUC-prevention script is included in the output.

Panel Sections

The panel is divided into three sections:

Palette (16 colors)

Shows 16 color swatches in an 8-column grid, labeled p0 through p15. Click any swatch to open a native color picker and change that palette slot. Changes are applied instantly to all CSS custom properties that reference the slot.

Base Theme

Controls for the five base colors: bg (background), fg (foreground), cursor, sel-bg (selection background), and sel-fg (selection foreground). These map directly to --zd-bg, --zd-fg, --zd-cursor, --zd-sel-bg, and --zd-sel-fg.

Semantic Tokens

Shows all 10 semantic tokens with their current resolved colors and default palette mappings. Each token displays which palette slot it defaults to (e.g., accent defaults to p6).

You can override any semantic token with a custom color via the color picker. Overridden tokens show a reset link to restore the palette default.

Persistence

All changes are saved to localStorage (key: zudo-doc-tweak-state) and automatically re-applied on page load and during View Transition navigations. An inline script runs before first paint to prevent FOUC (flash of unstyled content).

To clear all tweaks and restore the original color scheme, click Reset all in the panel header.

Exporting a Color Scheme

Click the Export button in the panel header to open a modal dialog showing the current color configuration as TypeScript code. The output matches the ColorScheme interface format and can be pasted directly into src/config/color-schemes.ts.

Click Copy to copy the code to your clipboard.

💡 Tip

The export workflow lets you design a scheme visually in the browser, then save it as a permanent scheme in your project configuration.

Scheme Chooser

The panel header bar includes a “Scheme…” dropdown that lets you browse and load from 50+ preset color schemes (Dracula, Nord, Solarized, Catppuccin, and many more).

Selecting a preset:

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
After loading a preset, you can further tweak individual colors as needed

Click Reset all in the panel header to discard all tweaks and restore the original scheme from src/config/settings.ts.