ダーク/ライトモードトグル
このトグルは、ボタンを押すと配色をライト／ダークで切り替えるテーマスイッチです。色は :root と [data-theme=dark] に置いた CSS カスタムプロパティ（背景・文字・カードなど）で管理し、ラッパー要素の data-theme 属性を書き換えるだけで全体の見た目が一括で変わります。
解説
このトグルは、ボタンを押すと配色をライト／ダークで切り替えるテーマスイッチです。色は :root と [data-theme=dark] に置いた CSS カスタムプロパティ（背景・文字・カードなど）で管理し、ラッパー要素の data-theme 属性を書き換えるだけで全体の見た目が一括で変わります。初回表示は matchMedia('(prefers-color-scheme:dark)') で OS の設定を読み取り、利用者の好みに合わせた状態から始まります。アイコンも太陽と月の SVG で連動します。
使いどころ
- コーポレートサイトやブログのヘッダーに置く常設のテーマ切り替え
- 長文記事や管理画面など、夜間に見る時間が長い画面
- 目に優しい表示を選びたい利用者への配慮
色を変えるときは CSS 変数の値を差し替えるだけで済み、各要素のセレクタを触る必要はありません。背景の切り替えには transition が効いているので、急に色が飛ばず滑らかに変わります。実運用では選んだテーマを localStorage に保存して再訪時も維持すると親切です。ボタンには aria-label が付いているので、画面読み上げでも用途が伝わります。
よくある質問
選んだテーマは次に開いたときも残りますか
このデモは毎回 OS の設定から始まります。再訪時も維持したい場合は、切り替えた値を localStorage に保存し、読み込み時に読み戻す数行を足してください。
配色を自社ブランドの色に変えられますか
はい。ライトは :root、ダークは data-theme=dark の中の CSS 変数（背景・文字・カードなど）の値を書き換えるだけで、各要素のセレクタを触らずに全体の色を変更できます。