カラースキームプレビュー
Design Token Panel の Palette タブを使って zudo-doc のカラーランプをプレビュー・調整する方法。
概要
zudo-doc はちょうど 2 つのカラースキーム — Default Light と Default Dark — を同梱しており、両者は 1 セットの OKLCH ランプを共有しています（Color を参照）。ブラウズできるコミュニティ製やターミナル由来のプリセットカタログはバンドルされていません。
Note
以前の Design Token Panel には、50 種類以上のバンドルプリセット（Dracula、Nord、Solarized など）を読み込むための "Scheme…" ドロップダウンがありました。ランプネイティブなカラーモデルではこのドロップダウンは廃止され、いまはランプそのものが編集可能なソースオブトゥルースとなり、後述の Palette タブで公開されています。
あのドロップダウンが提供していた「カタログを眺めて選ぶ」体験は、いまは別のレイヤーに引き継がれています。テーマパックは、トークン・フォント・コンポーネントのディテールまで揃ったインストール可能なデザインバンドルで、ライブの一覧スイッチャーを備えています — カラースキームシステムの一段上にある、プリセットドロップダウンの概念的な後継です。
動作の仕組み
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 に設定します:
export default defineConfig(
zudoDoc({
designTokenPanel: true,
// ...
}),
);有効になるとヘッダーバーにパレットアイコンが表示されます。クリックするとパネルが開閉します。ランプのカーブエディタは Palette タブにあります。
Tip
ランプをライブで調整する機能は、明度や色相の変更がサイト全体にどう波及するかを、自作の colorSchemes 上書きモジュール（カスタムカラースキームの追加を参照）にコミットする前に素早く評価できるため、開発中に特に便利です。
関連項目
Color — ランプネイティブなカラーモデル、セマンティックトークン、カスタムスキームの追加方法
Design Token Panel — スペーシング・フォント・サイズ・カラー各トークンのインタラクティブなタブ型エディタ
テーマパック — カラースキームシステムの上に重なるインストール可能なデザインバンドル。ライブの一覧スイッチャー付き