ダークモード対応のメモ
このブログのダークモード対応についてのメモです。
仕組み
- テーマの色はすべてCSS変数（カスタムプロパティ）で定義する
<html>のdata-theme属性で ライト / ダーク を切り替える- 選んだテーマは
localStorageに保存して、次回訪問時も維持する
ちらつき対策
ページ描画前に <head> 内のインラインスクリプトでテーマを適用することで、
リロード時に一瞬ライトモードで表示される「ちらつき」を防いでいます。
初回訪問時は、OSの設定（prefers-color-scheme）に合わせます。