CSS プロパティ color-scheme と対応するメタタグを使用すると、デベロッパーはユーザー エージェント スタイルシートのテーマ固有のデフォルトにページをオプトインできます。
背景
prefers-color-scheme ユーザー設定のメディア機能
prefers-color-scheme ユーザー設定のメディア機能を使用すると、デベロッパーはページの外観を完全に制御できます。詳しくご存じない場合は、prefers-color-scheme: こんにちは、暗闇の中をご覧ください。ここには、優れたダークモードの作成について知っていることをすべて記載しています。
パズルのピースとして、color-scheme CSS プロパティと、それに対応する同じ名前のメタタグがあります。どちらも、ユーザー エージェント スタイルシートのテーマ固有のデフォルト（フォーム コントロール、スクロールバー、CSS システムカラーなど）をページで有効にできるため、デベロッパーの作業が容易になります。同時に、この機能により、ブラウザが独自に変換を適用することはできません。
ブラウザ サポート
prefers-color-scheme
color-scheme
ユーザー エージェント スタイルシート
先に進む前に、ユーザー エージェント スタイルシートの概要を簡単に説明します。ユーザー エージェント（UA）は「ブラウザ」の専門的な表現です。UA スタイルシートによって、ページのデフォルトのデザインが決まります。その名のとおり、UA スタイルシートは対象の UA に依存するものです。Chrome（および Chromium）の UA スタイルシートで、Firefox または Safari（および WebKit）の UA スタイルシートと比較してください。通常、UA スタイルシートは大部分の点で一致しています。たとえば、リンクは青、一般的なテキストは黒、背景色は白となりますが、フォーム コントロールのスタイル設定など、重要な（場合によっては煩わしい）違いもあります。
WebKit の UA スタイルシートとダークモードに関する役割の詳細をご覧ください。（スタイルシートで「dark」を全文検索します）。スタイルシートで指定されるデフォルトは、ダークモードのオン / オフによって変わります。以下は、:matches 疑似クラスと WebKit 内部の変数（-apple-system-control-background など）および WebKit 内部のプリプロセッサ ディレクティブ #if defined を使用した CSS ルールの一例です。
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
上記の color プロパティと background-color プロパティには非標準の値がいくつかあります。
text と -apple-system-control-background のどちらも、有効な CSS の色ではありません。WebKit 内部のセマンティック カラーです。
CSS ではセマンティック システムカラーが標準化されています。CSS Color Module Level 4 で指定されます。たとえば、Canvas（<canvas> タグと混同しないでください）はアプリのコンテンツやドキュメントの背景に使用するのに対し、CanvasText はアプリのコンテンツやドキュメント内のテキストに使用します。この 2 つは連携するので、単独で使用すべきではありません。
UA スタイルシートでは、HTML 要素のデフォルトのレンダリング方法を決定するために、独自の色または標準化されたセマンティック システム色を使用できます。オペレーティング システムがダークモードに設定されている場合、またはダークモードを使用している場合、CanvasText（または text）は条件付きで白に設定され、Canvas（または -apple-system-control-background）は黒に設定されます。UA スタイルシートは次の CSS を 1 回だけ割り当て、ライトモードとダークモードの両方に対応します。
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
color-scheme CSS プロパティ
CSS Color Adjust Module Level 1 仕様では、ダークモード、コントラスト調整、特定のカラーパターンなどのユーザー設定を処理する目的で、ユーザー エージェントによる自動色調整のモデルと制御が導入されています。
そこで定義されている color-scheme プロパティにより、要素はレンダリングに適したカラーパターンを示すことができます。これらの値はユーザーの設定に応じてネゴシエートされ、フォーム コントロールやスクロールバーのデフォルトの色や、使用される CSS システムカラーの値など、ユーザー インターフェース（UI）に影響するカラーパターンが選択されます。現在サポートされている値は、以下のとおりです。
normalは、要素がカラーパターンをまったく認識しないため、ブラウザのデフォルトのカラーパターンで要素をレンダリングする必要があることを示します。[ light | dark ]+は、要素がリストされたカラーパターンを認識し、処理できることを示し、それらのカラーパターン間の優先順位付けを表します。
このリストで、light は明るい背景色と暗い前景色のライト カラーパターンを表し、dark は暗い背景色と明るい前景色のその逆を表します。
すべての要素について、カラーパターンを使用してレンダリングする場合、ブラウザが提供するすべての UI で使用される、要素の色がカラーパターンの意図に一致する必要があります。例としては、スクロールバー、下線のスペルチェック、フォーム コントロールなどがあります。
:root 要素では、カラーパターンを使用したレンダリングでは、キャンバスのサーフェスの色（グローバル背景色）、color プロパティの初期値、使用されるシステムカラーの値に加え、ビューポートのスクロールバーにも影響する必要があります。
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
color-scheme メタタグ
CSS プロパティ color-scheme を使用するには、まず CSS をダウンロードし（<link rel="stylesheet"> を介して参照される場合）、解析する必要があります。ユーザー エージェントが目的のカラーパターンでページの背景をすぐにレンダリングできるように、<meta name="color-scheme"> 要素で color-scheme 値を指定することもできます。
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
color-scheme と prefers-color-scheme を組み合わせる
メタタグと CSS プロパティ（:root 要素に適用した場合）はどちらも最終的に同じ動作になるため、ブラウザが優先するスキームをより迅速に採用できるように、メタタグを使用してカラーパターンを指定することをおすすめします。
絶対的なベースライン ページでは、追加の CSS ルールは必要ありませんが、通常は、color-scheme と prefers-color-scheme を組み合わせる必要があります。たとえば、WebKit と Chrome でクラシック リンクの青色 rgb(0,0,238) に使用されている独自の WebKit CSS カラー -webkit-link は、黒い背景でのコントラスト比が 2.23:1 と十分でなく、WCAG AA と WCAG AAA の要件の両方を満たしていません。
この問題を解決するために、Chrome、WebKit、Firefox のバグと、HTML 標準のメタ問題をオープンしました。
prefers-color-scheme でプレイする
color-scheme CSS プロパティと、それに対応するメタタグと、ユーザー設定のメディア機能 prefers-color-scheme との違いは、最初はわかりにくいかもしれません。実際、両者はうまく連携しています。最も重要なことは、color-scheme がデフォルトの外観のみを決定するのに対し、prefers-color-scheme はスタイル設定可能な外観を決定することです。わかりやすくするため、次のページを想定します。
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
ページ上のインライン CSS コードは、一般的なケースで <fieldset> 要素の background-color を gainsboro に設定し、ユーザーが prefers-color-scheme ユーザー設定のメディア機能に従って dark カラーパターンを希望する場合は darkslategray に設定します。
ページは <meta name="color-scheme" content="dark light"> 要素を介して、ダークモードとライトモードをサポートし、ダークモードを優先していることをブラウザに伝えます。
オペレーティング システムがダークモードとライトモードのどちらに設定されているかによって、ユーザー エージェント スタイルシートに基づいて、ページ全体が暗い場合は明るい色で表示されます（その逆も同様です）。ページの段落テキストや背景色を変更するデベロッパー提供の CSS は一切必要ありません。
ダークモードが有効かどうかによって <fieldset> 要素の background-color がどのように変化するかに注目してください。デベロッパーが提供するページのインライン スタイルシートのルールに従います。gainsboro または darkslategray です。
<fieldset> 要素の background-color が gainsboro になっている。
<fieldset> 要素の background-color が darkslategray になっている。<button> 要素の外観は、ユーザー エージェント スタイルシートによって制御されます。color は ButtonText システムカラーに設定され、background-color と 4 つの border-color はシステムカラー ButtonFace に設定されます。
background-color とさまざまな border-color が ButtonFace システムカラーに設定されます。
次に、<button> 要素の border-color がどのように変化するか確認します。ユーザー エージェントはカラーパターンに基づいて ButtonFace を動的に更新するため、border-top-color と border-bottom-color の計算済み値は rgba(0, 0, 0, 0.847)（黒色）から rgba(255, 255, 255, 0.847)（白色）に切り替わります。対応するシステムカラー ButtonText に設定されている <button> 要素の color についても同様です。
ButtonFace に設定されている border-top-color と border-bottom-color の計算値は rgba(0, 0, 0, 0.847) になりました。
ButtonFace に設定されている border-top-color と border-bottom-color の計算値が rgba(255, 255, 255, 0.847) になりました。
デモ
color-scheme を多数の HTML 要素に適用した場合の効果については、Glitch のデモをご覧ください。このデモでは、WCAG AA と WCAG AAA の違反が意図的に表示されています。上記の警告で説明したリンクの色は、
color-scheme: light に切り替わりました。
color-scheme: dark に切り替わりました。
WCAG AA および WCAG AAA の
違反
に注意して、リンクの色を含めてください。
謝辞
color-scheme CSS プロパティと対応するメタタグは、Rune Lillesveen によって実装されました。また、CSS Color Adjust Module Level 1 仕様の共同編集者でもあります。
ヒーロー画像（作成者: Philippe Leone、出典: Unsplash）