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

Design Token PanelのColorタブを使ってカラースキームをブラウズ・プレビューする方法。

概要

カラースキームプレビューは、50種類以上のプリセットカラースキームをブラウズし、リアルタイムでサイトに適用できる機能です。この機能はDesign Token PanelのColorタブにあり、タブヘッダーの “Scheme…” ドロップダウンから呼び出します。

動作の仕組み

Design Token Panelが有効な状態で Color タブを開くと、“Scheme…” ドロップダウンが表示され、利用可能なすべてのプリセットが一覧されます。スキームを選択すると:

• プリセットのパレット・ベースカラー・セマンティックカラーをすべて tweak state に読み込む
• 即座にページに反映する
• localStorage に保持されるため、ページリロードやナビゲーションを越えて維持される
• ソースファイルは一切変更されず、変更はクライアント側のみに留まる

プリセット読み込み後は、タブのカラーピッカーで個別の色をさらに調整できます。

Design Token Panelの有効化

src/config/settings.ts で designTokenPanel を true に設定します:

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

有効になるとヘッダーバーにパレットアイコンが表示されます。クリックするとパネルが開閉し、Color タブ内に “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 のシンタックスハイライトテーマ、および任意のセマンティックカラー上書きを指定します。

関連項目

• Design Token Panel — スペーシング・フォント・サイズ・カラー各トークンのインタラクティブなタブ型エディタ