ダーク・モードへ適応するなら、フォーム関連要素の色も切り替えるよう、CSSを書くだろう。しかし、それだけでは、例えばテキストエリアで出てくるスクロールバーが明るいままなので、かなり浮いてしまう。meta要素でname=color-schemeを適切に設定すると、そういったスクロールバーの色も含めたあらゆるものの色を暗く(明るく)できる。
書き方は特に難しくない。ダーク・モードへ適応しようと、prefers-color-schemeメディア・クエリーを使って、明るい背景と暗い背景を切り替えるなら、以下のようにHTMLファイルのhead要素以下に書けばいい。viewportと似たようなものだ。
<meta
name="color-scheme"
content="light dark">lightとdarkの順序は、逆でも意味は変わらない。これだけでユーザーのOSやブラウザーでのダーク・モード設定にしたがって、フォーム関連要素やスクロールバーの色が切り替わってくれる。具体的にどのように切り替わるかは、Safariでの紹介を参照するといいだろう。ChromeやEdgeでも、同じようになじみやすい色合いに変わってくれる。
Safariでの紹介では、CSSでcolor-schemeプロパティーを使っている。こうした場合、CSSをパースするまで外観モードに従うべきかはっきりしないため、読み込み時にちらつく可能性がないこともない。そうなった場合、ユーザーへ大きな不利益を与えるので、HTMLにmeta要素で書いた方が無難だろう。
また、HTMLに書くと、何らかの理由でCSSが読み込めなかった場合にも利点がある。そういった場合にも、ユーザーのダーク・モード設定にしたがって、背景色が白または黒に適応してくれるからだ。この挙動には議論の余地があるが、ユーザーの環境の尊重という観点では、HTMLに書く方に軍配が上がるだろう。
一方で、CSSに書く利点もある。prefers-color-schemeメディア・クエリーなどと共に、すべてCSSに閉じ込められるからだ。ツールなどでCSSをインライン化する場合などには、ちらつく危険性や読み込み失敗の可能性がほぼなくなるので、CSSに書いてもいいかもしれない。
ダーク・モードへ適応せず、明るい背景のウェブページなら、このmeta要素を書く必要はない。今まで通り、明るいもので構わないからだ。後方互換性のため、ブラウザーは既定で明るいものを使うままになっている。
逆に、暗い背景のみのウェブページを作っているなら、content属性の値をdarkのみにするといい。こうすると、ユーザーの外観モード設定を無視して常に暗いものを使うようになる。今までは扱いが難しかったスクロールバー、特に上述したテキストエリアでのスクロールバーがうまくなじむようになり、ユーザー体験の向上に貢献するだろう。
2021年2月15日現在の最新版であるFirefox 85では、このmeta要素でのname=color-schemeやCSSのcolor-schemeプロパティーはサポートされていない。しかし、ウェブページの背景色に基づいて自動で切り替わるようになっており、記述の有無は関係ない。Firefoxだけでのみ挙動が違うということもないはずなので、あまり気にする必要はないだろう。
ただし、CSSの書き方によっては、暗い背景なのに明るいものが使われてしまうことがある。確認は忘れないようにしたい。このウェブサイトでは最近直した。Firefox 64以降ではscrollbar-colorプロパティーが実装されているので、確実を期すなら、こちらも利用した方がいいかもしれない。
まとめると以下のようになる。
<meta name="color-scheme" content="light dark"><meta name="color-scheme" content="dark">にこのmeta要素でname=color-schemeの実装は、Safari 12が最初で、後にChrome 81やEdge 81でサポートされた。ChromeとEdgeでのサポートからは、すでに半年以上になる。ダーク・モードの広まりに若干遅れたため、記述していないウェブページはかなり多い。些細なことと思わずに、ぜひ記述してほしい。