🚀 新規事業
add-dark-mode
最終更新 2026年05月09日 / 40_新規事業/SCALE_Build/カタログ/プロンプト集/add-dark-mode.md
ダークモード切替を追加
いつ使う?
ライト/ダーク両対応を後付けしたい時
コピペ用 指示文
既存システムにダークモード切替機能を追加してください。
【要件】
- ヘッダーに切替トグル(太陽/月アイコン)
- 設定は localStorage に保存
- OS設定に追従するモード(Auto)も用意
- 全画面で確実に切り替わる(hardcoded color はゼロにする)
【実装】
- Tailwind の dark: prefix を使う
- :root に CSS変数で色を定義 → .dark で上書き
- prefers-color-scheme: dark をデフォルトに
【既存への影響】
- すべてのhardcoded colorをCSS変数 or Tailwind dark: に置換
- 画像・ロゴはダーク用バリエーションを用意(白/黒2種)
タグ
#UI / #ダークモード / #機能追加