CSS変数と data-theme 属性を組み合わせると、ダーク/ライトモードの切り替えはとてもシンプルに実装できます。

基本の考え方

  1. :root にライトモードの色をCSS変数として定義する
  2. html[data-theme="dark"] で同じ変数をダークモード用に上書きする
  3. JavaScriptで data-theme 属性を切り替える
:root {
  --bg: #ffffff;
  --text: #111111;
}
html[data-theme="dark"] {
  --bg: #111111;
  --text: #eeeeee;
}

ちらつき防止

ページ読み込み時に一瞬ライトモードが見えてしまう「FOUC」を防ぐには、<head> 内で同期的にテーマを設定するスクリプトを置くのがポイントです。

これだけで、リロードしてもテーマが保持される、実用的な切り替え機能ができあがります。