ダークモード実装、OS設定の尊重とサイト単位のトグル対応を両立させる

要約

ウェブサイトのダークモード実装で、OSの設定を尊重しつつユーザーが個別にトグルで切り替えられる方法を解説している。HTMLの color-scheme メタタグを使いOS設定をデフォルトにしながら、JavaScriptで localStorage に保存したユーザー選択を上書きすれば両立できる。color-scheme は CSS の light-dark() 関数やシステムカラー、ボタンなどの要素デフォルト色に影響を与える一方、prefers-color-scheme メディアクエリはOS設定のみを反映するため、iframe と SVG を除き media query は color-scheme の値に連動しない。light-dark() は Chrome/Firefox/Safari の最新版で画像やグラデーション対応が進み、スタイルクエリ (@container style) を活用すれば box-shadow や border など色以上の変更も条件分岐できる。