## 概要

zudo-doc はちょうど 2 つのカラースキーム — **Default Light** と **Default Dark** — を同梱しており、両者は 1 セットの OKLCH ランプを共有しています（[Color](https://zudo-doc.takazudomodular.com/ja/docs/reference/color) を参照）。ブラウズできるコミュニティ製やターミナル由来のプリセットカタログはバンドルされていません。

[Dynamic content unavailable in text export]

以前の Design Token Panel には、50 種類以上のバンドルプリセット（Dracula、Nord、Solarized など）を読み込むための **"Scheme…" ドロップダウン**がありました。ランプネイティブなカラーモデルではこのドロップダウンは廃止され、いまはランプそのものが編集可能なソースオブトゥルースとなり、後述の **Palette** タブで公開されています。

あのドロップダウンが提供していた「カタログを眺めて選ぶ」体験は、いまは別のレイヤーに引き継がれています。[テーマパック](https://zudo-doc.takazudomodular.com/ja/docs/reference/theme-packs)は、トークン・フォント・コンポーネントのディテールまで揃ったインストール可能なデザインバンドルで、ライブの一覧スイッチャーを備えています — カラースキームシステムの一段上にある、プリセットドロップダウンの概念的な後継です。



## 動作の仕組み

[Design Token Panel](https://zudo-doc.takazudomodular.com/ja/docs/reference/design-token-panel) が有効な状態で **Palette** タブを開くと、共有される 3 つのランプ — **Base**（5 ストップ）、**Accent**（3 ストップ）、**State**（`danger`/`success`/`warning`/`info`）— が zdtp ネイティブの OKLCH 明度/彩度/色相のカーブエディタで表示されます。ストップをドラッグすると:

- 新しい色が即座にページへ反映される（そのストップから構築されたすべてのセマンティックロールがライブで更新される）
- 変更が `localStorage` に保持されるため、ページリロードやナビゲーションを越えて維持される
- ソースファイルは一切変更されず、変更はクライアント側のみに留まる

**Color** タブは、解決済みの 23 のセマンティックロール（`accent`、`codeBg`、`success`、`mermaidText`、…）を直接の OKLCH スウォッチとして表示するため、各ランプストップがどのロールに供給されているかを正確に確認できます。

## Design Token Panelの有効化

`zfb.config.ts` で `designTokenPanel` を `true` に設定します:

```ts title="zfb.config.ts"
export default defineConfig(
  zudoDoc({
    designTokenPanel: true,
    // ...
  }),
);
```

有効になるとヘッダーバーにパレットアイコンが表示されます。クリックするとパネルが開閉します。ランプのカーブエディタは **Palette** タブにあります。

[Dynamic content unavailable in text export]

ランプをライブで調整する機能は、明度や色相の変更がサイト全体にどう波及するかを、自作の `colorSchemes` 上書きモジュール（[カスタムカラースキームの追加](https://zudo-doc.takazudomodular.com/ja/docs/reference/color#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%A0%E3%81%AE%E8%BF%BD%E5%8A%A0)を参照）にコミットする前に素早く評価できるため、開発中に特に便利です。



## 関連項目

- [Color](https://zudo-doc.takazudomodular.com/ja/docs/reference/color) — ランプネイティブなカラーモデル、セマンティックトークン、カスタムスキームの追加方法
- [Design Token Panel](https://zudo-doc.takazudomodular.com/ja/docs/reference/design-token-panel) — スペーシング・フォント・サイズ・カラー各トークンのインタラクティブなタブ型エディタ
- [テーマパック](https://zudo-doc.takazudomodular.com/ja/docs/reference/theme-packs) — カラースキームシステムの上に重なるインストール可能なデザインバンドル。ライブの一覧スイッチャー付き