Color Scheme Preview
How to preview and tweak zudo-doc's color ramps using the Design Token Panel's Palette tab.
Overview
zudo-doc ships exactly two color schemes — Default Light and Default Dark — sharing one set of OKLCH ramps (see Color). There is no bundled catalog of community or terminal presets to browse.
Note
An earlier iteration of the Design Token Panel had a "Scheme…" dropdown for loading any of 50+ bundled presets (Dracula, Nord, Solarized, and similar). The ramp-native color model dropped that dropdown — the ramps themselves are now the editable source of truth, surfaced by the Palette tab below.
The browse-a-catalog experience it offered lives on in a different layer: theme packs are installable full-design bundles — tokens, fonts, component details — with a live browse-all switcher, the conceptual successor to that preset dropdown one level above the color-scheme system.
How It Works
When the Design Token Panel is enabled, switch to the Palette tab to see the three shared ramps — Base (5 stops), Accent (3 stops), and State (danger/success/warning/info) — rendered with zdtp's native OKLCH lightness/chroma/hue curve editor. Dragging a stop:
Applies the new color to the page immediately (every semantic role built from that stop updates live)
Persists the change in
localStorageso it survives page reloads and navigationDoes not modify any source files — the change is client-side only
The Color tab shows the 23 resolved semantic roles (accent, codeBg, success, mermaidText, …) as direct OKLCH swatches, so you can see exactly which role each ramp stop feeds into.
Enabling the Design Token Panel
Set designTokenPanel to true in zfb.config.ts:
export default defineConfig(
zudoDoc({
designTokenPanel: true,
// ...
}),
);When enabled, a palette icon appears in the header bar. Clicking it toggles the panel open/closed. The ramp curve editor is on the Palette tab.
Tip
Tweaking the ramps live is particularly useful during development to quickly evaluate how a lightness or hue change ripples across the whole site before committing it to your own colorSchemes override module (see Adding a Custom Color Scheme).
See Also
Color — the ramp-native color model, semantic tokens, and how to add a custom scheme
Design Token Panel — interactive tabbed editor for spacing, font, size, and color tokens
Theme Packs — installable full-design bundles layered on top of the color-scheme system, with a live browse-all switcher