ダークモード切替
このダークモード切替は、CSS カスタムプロパティ（変数）と少量の JavaScript だけで作る、軽量なテーマ切り替え部品です。 :root に明るいテーマの色を、 [data-theme=dark] に暗いテーマの色を変数として定義し、ボタンを押すと documentElement の data-theme…
解説
このダークモード切替は、CSS カスタムプロパティ（変数）と少量の JavaScript だけで作る、軽量なテーマ切り替え部品です。:root に明るいテーマの色を、[data-theme=dark] に暗いテーマの色を変数として定義し、ボタンを押すと documentElement の data-theme 属性を切り替えます。色は変数を参照しているので、属性が変わるだけでページ全体の配色が一括で入れ替わります。さらに localStorage に選択結果を保存するため、再訪問しても前回のテーマを覚えています。
使う場面
- コーポレートサイトやブログで、夜間に読みやすい暗い表示を提供したいとき
- ダッシュボードや管理画面など、長時間見る画面の目の負担を減らしたいとき
- OS のテーマ設定に合わせた切り替えの土台にしたいとき
配色を変えるときは変数の値だけ書き換えれば済みます。切り替え時の transition は控えめにし、ちらつきを嫌う利用者向けに prefers-reduced-motion で短縮するのがおすすめです。初期表示でのフラッシュを防ぐには、localStorage の読み取りをページ先頭で実行してください。
よくある質問
選んだテーマは次回も保持されますか？
はい。選択結果を localStorage に保存しているため、ページを再読み込みしたり後日もう一度開いたりしても、前回選んだテーマで表示されます。ブラウザのデータを消去すると初期状態に戻ります。
配色を自分のブランドカラーに変えられますか？
できます。CSS の冒頭にある変数（背景色、文字色、カードの色）の値を書き換えるだけで、明るいテーマと暗いテーマそれぞれの配色を自由に調整できます。HTML や JavaScript を触る必要はありません。