カラー調整パネル

リアルタイムカラーカスタマイズ用のインタラクティブカラースキームエディタ。

概要

カラー調整パネルは、ページ上のすべてのカラー値をリアルタイムで変更できるインタラクティブエディタです。ビューポート下部に固定パネルとして開き、16色パレット、ベーステーマカラー、セマンティックトークンのオーバーライドのコントロールを提供します。

用途：

• 設定ファイルを編集する代わりに、視覚的に新しいカラースキームをデザイン
• カラー変更がサイト全体にどのように影響するかをプレビュー
• 結果をColorSchemeオブジェクトとしてエクスポートし、src/config/color-schemes.tsに貼り付け

パネルの有効化

src/config/settings.tsでcolorTweakPanelをtrueに設定します：

export const settings = {
  colorTweakPanel: true,
  // ...
};

有効にすると、ヘッダーバーに（検索アイコンの左側に）パレットアイコンが表示されます。クリックするとパネルの開閉を切り替えます。

パネルのセクション

パネルは3つのセクションに分かれています：

パレット（16色）

16色のカラースウォッチを8列のグリッドで表示し、p0からp15のラベルが付いています。スウォッチをクリックするとネイティブカラーピッカーが開き、そのパレットスロットを変更できます。変更はそのスロットを参照するすべてのCSSカスタムプロパティに即座に適用されます。

ベーステーマ

5つのベースカラーのコントロール：bg（背景）、fg（前景）、cursor、sel-bg（選択背景）、sel-fg（選択前景）。これらは--zd-bg、--zd-fg、--zd-cursor、--zd-sel-bg、--zd-sel-fgに直接マッピングされます。

セマンティックトークン

10個のセマンティックトークンすべてを、現在の解決済みカラーとデフォルトのパレットマッピングとともに表示します。各トークンはデフォルトのパレットスロット（例：accentはデフォルトでp6）を表示します。

カラーピッカーを使用して任意のセマンティックトークンをカスタムカラーでオーバーライドできます。オーバーライドされたトークンには、パレットデフォルトに戻すためのresetリンクが表示されます。

永続化

すべての変更はlocalStorage（キー：zudo-doc-tweak-state）に保存され、ページ読み込み時やView Transitionナビゲーション中に自動的に再適用されます。初回ペイント前にインラインスクリプトが実行され、FOUC（スタイル未適用コンテンツのフラッシュ）を防止します。

すべての調整をクリアして元のカラースキームに戻すには、パネルヘッダーのReset allをクリックします。

カラースキームのエクスポート

パネルヘッダーのExportボタンをクリックすると、現在のカラー設定をTypeScriptコードとして表示するモーダルダイアログが開きます。出力はColorSchemeインターフェース形式に一致し、src/config/color-schemes.tsに直接貼り付けることができます。

Copyをクリックしてコードをクリップボードにコピーします。

スキームチューザー

パネルヘッダーバーには 「Scheme…」 ドロップダウンがあり、50以上のプリセットカラースキーム（Dracula、Nord、Solarized、Catppuccin など）を閲覧して読み込むことができます。

プリセットを選択すると：

• プリセットのパレット、ベース、セマンティックカラーがすべて調整状態に読み込まれます
• カラーが即座にページに適用されます
• 選択は localStorage に保存され、ページのリロードやナビゲーションをまたいで維持されます
• プリセットを読み込んだ後、必要に応じて個々のカラーをさらに調整できます

パネルヘッダーの Reset all をクリックすると、すべての調整を破棄し、src/config/settings.ts の元のスキームに戻ります。