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
です。
<button>
要素の外観は、ユーザー エージェント スタイルシートによって制御されます。color
は ButtonText
システムカラーに設定され、background-color
と 4 つの 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
についても同様です。
デモ
color-scheme
を多数の HTML 要素に適用した場合の効果については、Glitch のデモをご覧ください。このデモでは、WCAG AA と WCAG AAA の違反が意図的に表示されています。上記の警告で説明したリンクの色は、
謝辞
color-scheme
CSS プロパティと対応するメタタグは、Rune Lillesveen によって実装されました。また、CSS Color Adjust Module Level 1 仕様の共同編集者でもあります。
ヒーロー画像(作成者: Philippe Leone、出典: Unsplash)