ダークモードはCSS変数との組み合わせで実装する
CSS変数（カスタムプロパティ）を使うと、ダークモードの実装が驚くほどシンプルになります。AIにこのパターンを指定して依頼しましょう。
プロンプト例
「CSS変数を使ったダークモード切り替えを実装してください。
・:root にライトモードの変数を定義する
・body.is-dark にダーク用の変数を上書きする
・OSの設定（prefers-color-scheme）を初期値として参照する
・切り替えボタンクリックで body に .is-dark をトグル
・設定を localStorage で永続化する
・切り替えトランジションは 0.3s」
AIが生成するCSS変数の設計例
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-surface: #f5f5f5;
--color-border: #e0e0e0;
--color-accent: #3498db;
}
body.is-dark {
--color-bg: #0f1117;
--color-text: #e8e8e8;
--color-surface: #1e2130;
--color-border: #2d3561;
--color-accent: #4fc3f7;
}拡張できる追加機能
- 「トグルボタンを太陽☀️/月🌙アイコンで表現してください。」
- 「ダークモード切り替え時、本文全体にトランジション 0.3s を適用してください。」
- 「システム設定が変わったとき（matchMedia）も自動追従させてください。」
💡 既存プロジェクトへの導入コツ：現在使っているカラーコード一覧をAIに渡して「これをCSS変数に変換してダークモード対応させてください」と依頼するのが最短ルートです。
