ダークモードの仕組み

公開日: 2026年4月1日

配色は CSS の light-dark() で 1 か所にまとめている。

--text: light-dark(#1a1a1a, #ededed);

既定では OS の設定（prefers-color-scheme）に従い、 切り替えボタンを押したときだけ <html data-theme="dark"> で上書きする。 選択は localStorage に保存し、<head> 内のインラインスクリプトが 描画前に反映するため、リロード時に色がちらつかない。

ボタンは aria-pressed で押下状態を伝えるので、 スクリーンリーダーでも現在のモードが分かる。