§13-01Personalization
ダーク / ライト切替 (system 追従可)
ライト・ダーク・システム追従の 3 択で外観を切り替える。
見やすい配色を利用者が選べ、端末設定に任せることもできる。夜間の利用や眩しさに敏感な人に配慮したいサービスで標準的に置く。
実装のポイント
light/dark/system の 3 値で持ち、system 時は matchMedia を購読する。初回のちらつきは head 内のインラインスクリプトで先にクラスを付けて防ぐ。
- 特徴
- ブラウザ API
- 永続化
- デモで使っているもの
- lucide-react
- matchMedia