ダークモードトークンシステム — ライトとダークテーマのトークンアーキテクチャ

ダークモードトークンアーキテクチャ

ダークモードトークンシステムは単に色を反転するだけではありません。両方のテーマで読みやすさ、コントラスト、美的品質を確保するために、すべてのビジュアルトークンの慎重なマッピングが必要です。

二層トークンアーキテクチャ

トークンを2つの層に分けます：

レイヤー1：プリミティブトークン（テーマ非依存）

:root {
  --palette-blue-50: #eff6ff;
  --palette-blue-500: #3b82f6;
  --palette-blue-900: #1e3a8a;
  --palette-gray-50: #f9fafb;
  --palette-gray-900: #111827;
}

レイヤー2：セマンティックトークン（テーマ依存）

/* ライトテーマ（デフォルト） */
:root {
  --colors-bg: var(--palette-gray-50);
  --colors-text: var(--palette-gray-900);
  --colors-primary: var(--palette-blue-500);
}

/* ダークテーマ */
.dark {
  --colors-bg: var(--palette-gray-900);
  --colors-text: var(--palette-gray-50);
  --colors-primary: var(--palette-blue-500);
}

ダークモードで変わるもの

すべてが反転するわけではありません。背景はライトからダークに、テキストはダークからライトに、Primaryカラーは同じか若干明るくなります。

実装戦略

1. CSSクラストグル（.dark）：手動テーマ切り替えに最適（next-themes）
2. @media (prefers-color-scheme: dark)： OS設定に従う
3. 両方： メディアクエリをデフォルトに、クラストグルをオーバーライドとして使用