本文へ移動

§13-01Personalization

ダーク / ライト切替 (system 追従可)

ライト・ダーク・システム追従の 3 択で外観を切り替える。

見やすい配色を利用者が選べ、端末設定に任せることもできる。夜間の利用や眩しさに敏感な人に配慮したいサービスで標準的に置く。

実装のポイント

light/dark/system の 3 値で持ち、system 時は matchMedia を購読する。初回のちらつきは head 内のインラインスクリプトで先にクラスを付けて防ぐ。

特徴
  • ブラウザ API
  • 永続化
デモで使っているもの
  • lucide-react
  • matchMedia

このパターンが効く目的