## Overview

zudo-doc ships exactly two color schemes — **Default Light** and **Default Dark** — sharing one set of OKLCH ramps (see [Color](https://zudo-doc.takazudomodular.com/docs/reference/color)). There is no bundled catalog of community or terminal presets to browse.

[Dynamic content unavailable in text export]

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](https://zudo-doc.takazudomodular.com/docs/reference/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](https://zudo-doc.takazudomodular.com/docs/reference/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 `localStorage` so it survives page reloads and navigation
- Does 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`:

```ts title="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.

[Dynamic content unavailable in text export]

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](https://zudo-doc.takazudomodular.com/docs/reference/color#adding-a-custom-color-scheme)).



## See Also

- [Color](https://zudo-doc.takazudomodular.com/docs/reference/color) — the ramp-native color model, semantic tokens, and how to add a custom scheme
- [Design Token Panel](https://zudo-doc.takazudomodular.com/docs/reference/design-token-panel) — interactive tabbed editor for spacing, font, size, and color tokens
- [Theme Packs](https://zudo-doc.takazudomodular.com/docs/reference/theme-packs) — installable full-design bundles layered on top of the color-scheme system, with a live browse-all switcher