color-scheme
CSS プロパティと対応するメタタグを使用すると、デベロッパーはユーザー エージェント スタイルシートのテーマ固有のデフォルトにページをオプトインできます。
背景
prefers-color-scheme
ユーザー設定メディア機能
prefers-color-scheme
ユーザー設定メディア機能を使用すると、デベロッパーはページの外観を完全に制御できます。ダークモードについて詳しくは、prefers-color-scheme
: Hello darkness, my old friend をご覧ください。ダークモードの優れたエクスペリエンスの作成について、私が知っているすべてをまとめています。
この記事で簡単に説明したパズルのピースの 1 つが、color-scheme
CSS プロパティと、同じ名前の対応するメタタグです。どちらも、フォーム コントロール、スクロールバー、CSS システムカラーなど、ユーザー エージェント スタイルシートのテーマ固有のデフォルトをページでオプトインできるため、デベロッパーの作業が楽になります。また、この機能により、ブラウザが独自に変換を適用するのを防ぐことができます。
ブラウザ サポート
prefers-color-scheme
color-scheme
ユーザー エージェント スタイルシート
先に進む前に、ユーザー エージェント スタイルシートについて簡単に説明します。ほとんどの場合、ユーザー エージェント(UA)という単語は、ブラウザを別の言い方で表したものです。UA スタイルシートは、ページのデフォルトの外観を決定します。その名が示すように、UA スタイルシートは、対象の UA に依存します。Chrome(および Chromium)の UA スタイルシートを参照し、Firefox または Safari(および WebKit)と比較できます。通常、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
はアプリのコンテンツやドキュメント内のテキストに使用されます。これらは一緒に使用するものであり、単独で使用しないでください。
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 Adjustment 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
メタタグ
color-scheme
CSS プロパティを尊重するには、まず 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
がどのように変化するかを確認します。border-top-color
と border-bottom-color
の計算された値は、ユーザー エージェントがカラーパターンに基づいて ButtonFace
を動的に更新するため、rgba(0, 0, 0, 0.847)
(黒っぽい)から rgba(255, 255, 255, 0.847)
(白っぽい)に切り替わります。対応するシステム色 ButtonText
に設定されている <button>
要素の color
についても同様です。
デモ
多数の HTML 要素に適用された color-scheme
の効果は、Glitch のデモで確認できます。このデモでは、上記の警告に記載されているリンクの色で、WCAG AA と WCAG AAA の違反を意図的に示しています。
謝辞
color-scheme
CSS プロパティと対応するメタタグは、Rune Lillesveen によって実装されました。Rune は、CSS Color Adjustment Module Level 1 仕様の共同編集者でもあります。Unsplash の Philippe Leone によるヒーロー画像。