WindowsのEdgeが、ユーザーのダーク・モード設定に適応して、チェックボックスや、メーター、入力ボックス、セレクト・ボックス、ボタン、そしてスクロールバーの色を暗くしてくれている。

ダーク・モードへ適応するなら、フォーム関連要素の色も切り替えるよう、CSSを書くだろう。しかし、それだけでは、例えばテキストエリアで出てくるスクロールバーが明るいままなので、かなり浮いてしまう。meta要素でname=color-schemeを適切に設定すると、そういったスクロールバーの色も含めたあらゆるものの色を暗く(明るく)できる。

書き方は特に難しくない。ダーク・モードへ適応しようと、prefers-color-schemeメディア・クエリーを使って、明るい背景と暗い背景を切り替えるなら、以下のようにHTMLファイルのhead要素以下に書けばいい。viewportと似たようなものだ。

<meta
  name="color-scheme"
  content="light dark">

lightdarkの順序は、逆でも意味は変わらない。これだけでユーザーのOSやブラウザーでのダーク・モード設定にしたがって、フォーム関連要素やスクロールバーの色が切り替わってくれる。具体的にどのように切り替わるかは、Safariでの紹介を参照するといいだろう。ChromeやEdgeでも、同じようになじみやすい色合いに変わってくれる。

CSSに書くか、HTMLに書くか

Safariでの紹介では、CSSでcolor-schemeプロパティーを使っている。こうした場合、CSSをパースするまで外観モードに従うべきかはっきりしないため、読み込み時にちらつく可能性がないこともない。そうなった場合、ユーザーへ大きな不利益を与えるので、HTMLにmeta要素で書いた方が無難だろう。

また、HTMLに書くと、何らかの理由でCSSが読み込めなかった場合にも利点がある。そういった場合にも、ユーザーのダーク・モード設定にしたがって、背景色が白または黒に適応してくれるからだ。この挙動には議論の余地があるが、ユーザーの環境の尊重という観点では、HTMLに書く方に軍配が上がるだろう。

一方で、CSSに書く利点もある。prefers-color-schemeメディア・クエリーなどと共に、すべてCSSに閉じ込められるからだ。ツールなどでCSSをインライン化する場合などには、ちらつく危険性や読み込み失敗の可能性がほぼなくなるので、CSSに書いてもいいかもしれない。

常に書くべきか

ダーク・モードへ適応せず、明るい背景のウェブページなら、このmeta要素を書く必要はない。今まで通り、明るいもので構わないからだ。後方互換性のため、ブラウザーは既定で明るいものを使うままになっている。

逆に、暗い背景のみのウェブページを作っているなら、content属性の値をdarkのみにするといい。こうすると、ユーザーの外観モード設定を無視して常に暗いものを使うようになる。今までは扱いが難しかったスクロールバー、特に上述したテキストエリアでのスクロールバーがうまくなじむようになり、ユーザー体験の向上に貢献するだろう。

Firefoxについて

2021年2月15日現在の最新版であるFirefox 85では、このmeta要素でのname=color-schemeCSSのcolor-schemeプロパティーはサポートされていない。しかし、ウェブページの背景色に基づいて自動で切り替わるようになっており、記述の有無は関係ない。Firefoxだけでのみ挙動が違うということもないはずなので、あまり気にする必要はないだろう。

ただし、CSSの書き方によっては、暗い背景なのに明るいものが使われてしまうことがある。確認は忘れないようにしたい。このウェブサイトでは最近直した。Firefox 64以降ではscrollbar-colorプロパティーが実装されているので、確実を期すなら、こちらも利用した方がいいかもしれない。


まとめると以下のようになる。

このmeta要素でname=color-schemeの実装は、Safari 12が最初で、後にChrome 81やEdge 81でサポートされた。ChromeとEdgeでのサポートからは、すでに半年以上になる。ダーク・モードの広まりに若干遅れたため、記述していないウェブページはかなり多い。些細なことと思わずに、ぜひ記述してほしい。