カラースキームプレビュー

カラー調整パネルを使用してカラースキームを閲覧・プレビューする方法。

概要

カラースキームプレビューでは、50以上のプリセットカラースキームを閲覧し、リアルタイムでサイトに適用できます。この機能はカラー調整パネルのヘッダーバーにある「Scheme…」ドロップダウンに組み込まれています。

仕組み

カラー調整パネルが有効な場合、パネルヘッダーバーに 「Scheme…」 ドロップダウンが表示されます。利用可能なすべてのプリセットスキームが一覧表示されます。スキームを選択すると：

• プリセットのパレット、ベース、セマンティックカラーがすべて調整状態に読み込まれます
• カラーが即座にページに適用されます
• 選択は localStorage に保存され、ページのリロードやナビゲーションをまたいで維持されます
• ソースファイルは変更されません — 変更はクライアントサイドのみです

プリセットを読み込んだ後、パネルのカラーピッカーを使用して必要に応じて個々のカラーをさらに調整できます。

カラー調整パネルの有効化

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

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

有効にすると、ヘッダーバーにパレットアイコンが表示されます。クリックするとパネルの開閉を切り替えます。「Scheme…」ドロップダウンはパネルヘッダーにあります。

利用可能なカラースキーム

パネルには Dracula、Nord、Solarized Dark、Solarized Light、Catppuccin Mocha、Catppuccin Latte、Tokyo Night、Gruvbox Dark、GitHub Dark、GitHub Light など、50以上のプリセットカラースキームが含まれています。

バンドルされたスキーム（プロジェクトの color-schemes.ts に含まれるもの）がドロップダウンの先頭に表示され、セパレーターの後に残りのプリセットが続きます。

各スキームは16色パレット、背景色/前景色、選択色、Shiki コードハイライトテーマ、およびオプションのセマンティックカラーオーバーライドを指定します。

関連

• カラー調整パネル — ブラウザ上で個々のパレットカラーやセマンティックトークンをインタラクティブに編集