ダークモード

OSの希望、サイト内の選択、配色変数、ブラウザ部品を順に反映する単純反転ではなく、意味を保つ二組の色として設計する

配色が決まる層を分ける

OS設定は命令ではなく利用者の希望

@media (prefers-color-scheme: dark)は、利用者が暗い配色を希望していることをページへ伝えます。値を受け取れない場合や希望が示されていない場合もあるため、基本となる配色を先に成立させます。

サイト内に明暗の切り替えを設けるなら、初回はOS設定に合わせ、利用者が選んだ後はその選択を優先する設計が分かりやすくなります。「端末に合わせる」へ戻せる三択にすると、以前の選択を解除する方法も明確です。

color-schemeはページを自動着色する命令ではない

CSSのcolor-schemeは、その要素がどの配色に対応しているかをブラウザへ知らせます。ブラウザは入力欄、選択欄、スクロールバーなど、自身が描く部品の既定色を合わせられます。

宣言しただけで作者の背景色や文字色がすべて整うわけではありません。本文と部品を含む一式を実際に暗い配色へ対応させてから、対応可能なスキームを伝えます。

真っ黒と真っ白だけにしない

純黒の大面積に純白の細い文字を置くと、環境や視覚特性によって強いまぶしさやにじみを感じることがあります。暗い灰色や濃い有彩色を背景にし、本文は十分なコントラストを持つ明るい色へ調整します。

弱い補足文字を暗くし過ぎたり、境界線を消し過ぎたりすると、カードや入力欄の区切りが見えません。WCAGのコントラスト基準は両配色で個別に確認します。リンクやエラーを色だけで区別せず、下線、アイコン、文言など別の手掛かりも併用します。

色は役割名で管理する

--page-background、--text-primary、--link-colorのように用途で変数を分けると、明暗を入れ替えても意味を保てます。「白」「黒」という見た目で命名すると、ダークモードで変数名と実際の色が逆転します。

通常、hover、焦点、pressed、disabled、selected、成功、warning、エラーを一枚の状態表にして、各状態が隣と区別できるか確認します。焦点ringはキーボード操作の現在地なので、背景が変わっても消してはいけません。

画像とロゴは一律反転しない

写真を反転すると人物や商品の色が変わります。ロゴや説明図も色に意味がある場合があり、CSSフィルターでまとめて反転する方法は適しません。透明画像の暗い文字だけが見えなくなる場合は、明暗別素材、外周、背景板などを用意します。

強い白背景を持つ画像は暗いページでまぶしく見えるため、画像そのものを改変せず周囲の余白や枠で境界を整えます。動画、地図、埋め込みコンテンツは別の配色制御を持つことがあり、ページ側だけでは完全に切り替えられません。

ダークモードと強制色表示は別の機能

ハイコントラストやforced colors（フォースト・カラーズ）は、利用者またはOSが作者の色を置き換えて見やすさを確保する仕組みです。暗い配色の希望を示すprefers-color-schemeとは目的も挙動も異なります。

また、印刷時は用紙へ暗い背景を大量に出さない配慮が必要です。ダークモードで消費電力が下がるかどうかも、OLEDか液晶か、明るさ、表示内容で変わり、すべての端末に当てはまる利点ではありません。

ダークモードは色の反転ではなく、意味のある配色一式を切り替える設計です。OSの希望、サイトでの選択、ブラウザ部品、アクセシビリティを別の層として扱い、両方の配色を実画面で検査します。

利用者の配色希望を受け取るmedia feature：W3C「Media Queries Level 5」、ブラウザ部品を含む配色調整：W3C「CSS Color Adjustment Module Level 1」