CSS変数によるマルチテーマブランディングシステム

複数ブランドテーマのサポート

一部のアプリケーションではライトとダーク以上のものが必要です。SaaSプラットフォームでは各顧客が独自のブランドカラーを適用でき、マーケティングサイトではキャンペーンごとにテーマを切り替えることがあります。CSSカスタムプロパティでこれを管理できます。

アーキテクチャ

:rootでニュートラルなベーステーマを定義し、data属性でオーバーライドします：

:root {
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --accent: #8b5cf6;
  --bg: #0a0a0b;
  --surface: #141415;
}

[data-theme="sunset"] {
  --primary: #f97316;
  --primary-hover: #ea580c;
  --accent: #ef4444;
  --bg: #1c1917;
  --surface: #292524;
}

[data-theme="ocean"] {
  --primary: #06b6d4;
  --primary-hover: #0891b2;
  --accent: #14b8a6;
  --bg: #0c1222;
  --surface: #172135;
}

JavaScriptでのテーマ切り替え

document.documentElement.setAttribute('data-theme', 'sunset');

スコープ付きテーマ

data属性は任意のDOMレベルに適用でき、単一ページ内でローカライズされたテーマセクションを実現します。製品カードにdata-theme="ocean"を持たせ、ページの残りはデフォルトを使用できます。

トークン構造

セマンティックトークン（--primary、--bg、--text）をトップレベルに保ち、コンポーネントから参照します。各テーマはセマンティックトークンのみをオーバーライドし、すべてのコンポーネント変数ではありません。これにより、数十のコンポーネントがあってもオーバーライドのサーフェスが小さく保たれます。

テーマの動的生成

CSS変数ジェネレーターは複数のテーマブロックを生成できます。各ブランドのパレットを生成し、変数ブロックをエクスポートして、適切な属性セレクタと共にCSSバンドルに含めます。