このページは Cloud Translation API によって翻訳されました。

カラーパターンの CSS プロパティと対応するメタタグにより、ダークモードのデフォルトのスタイル設定を改善

color-scheme CSS プロパティと対応するメタタグを使用すると、デベロッパーはユーザーエージェントスタイルシートのテーマ固有のデフォルトにページをオプトインできます。

Thomas Steiner

背景

`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 で使用される色が、カラーパターンの意図と一致するようになります。たとえば、スクロールバー、スペルチェックの下線、フォームコントロールなどです。

注: color-scheme CSS プロパティは、:root レベルと要素ごとの個々のレベルの両方で使用できます。

: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 のいずれかです。

ライトモードのページ。 — **ライトモード:** デベロッパーとユーザーエージェントが指定したスタイル。ユーザーエージェントスタイルシートに従って、テキストは黒、背景は白です。 `<fieldset>` 要素の `background-color` は、インライン化されたデベロッパースタイルシートに従って `gainsboro` です。

ダークモードのページ。 — **ダークモード:** デベロッパーとユーザーエージェントが指定したスタイル。ユーザーエージェントスタイルシートに従って、テキストは白、背景は黒です。 `<fieldset>` 要素の `background-color` は、インライン化されたデベロッパースタイルシートに従って `darkslategray` です。

<button> 要素の外観は、ユーザーエージェントのスタイルシートによって制御されます。color はシステム色 ButtonText に設定され、background-color と 4 つの border-color はシステム色 ButtonFace に設定されています。

ButtonFace プロパティを使用するライトモードのページ。 — **ライトモード:** `background-color` とさまざまな `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 についても同様です。

計算された色の値が ButtonFace と一致していることを示しています。 — **ライトモード:** ユーザーエージェントスタイルシートで `ButtonFace` に設定されている `border-top-color` と `border-bottom-color` の計算値が `rgba(0, 0, 0, 0.847)` に変更されました。

ダークモードでも、計算された色の値が ButtonFace と一致していることを示しています。 — **ダークモード:** ユーザーエージェントスタイルシートで `ButtonFace` に設定されている `border-top-color` と `border-bottom-color` の計算値が `rgba(255, 255, 255, 0.847)` になりました。

デモ

多数の HTML 要素に適用された color-scheme の効果は、Glitch のデモで確認できます。このデモでは、上記の警告に記載されているリンクの色で、WCAG AA と WCAG AAA の違反を意図的に示しています。

ダークモードでのデモ。 — デモが `color-scheme: dark` に切り替わりました。 WCAG AA と WCAG AAA の違反は、リンクの色で確認できます。

謝辞

color-scheme CSS プロパティと対応するメタタグは、Rune Lillesveen によって実装されました。Rune は、CSS Color Adjustment Module Level 1 仕様の共同編集者でもあります。Unsplash の Philippe Leone によるヒーロー画像。

カラーパターンの CSS プロパティと対応するメタタグにより、ダークモードのデフォルトのスタイル設定を改善

背景

prefers-color-scheme ユーザー設定メディア機能

ブラウザ サポート

prefers-color-scheme

color-scheme

ユーザー エージェント スタイルシート

color-scheme CSS プロパティ

color-scheme メタタグ

color-scheme と prefers-color-scheme の組み合わせ

prefers-color-scheme との連携

デモ

謝辞

`prefers-color-scheme` ユーザー設定メディア機能

ブラウザサポート

`prefers-color-scheme`

`color-scheme`

ユーザーエージェントスタイルシート

`color-scheme` CSS プロパティ

`color-scheme` メタタグ

`color-scheme` と `prefers-color-scheme` の組み合わせ

`prefers-color-scheme` との連携