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

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

Thomas Steiner

背景情報

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 疑似クラス、-apple-system-control-background などの WebKit 内部変数、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 カラー モジュール レベル 4 で規定されています。たとえば、Canvas（<canvas> タグと混同しないでください）はアプリケーションのコンテンツやドキュメントの背景用であり、CanvasText はアプリケーションのコンテンツやドキュメント内のテキスト用です。この 2 つは一緒に使用されるため、単独で使用しないでください。

UA スタイルシートでは、独自の色または標準化されたセマンティック システム色を使用して、HTML 要素のデフォルトのレンダリング方法を決定できます。オペレーティング システムがダークモードに設定されているか、ダークモードを使用している場合、CanvasText（または text）は条件付きで白に設定され、Canvas（または -apple-system-control-background）は黒に設定されます。UA スタイルシートは、次の CSS を一度だけ割り当て、ライトモードとダークモードの両方に対応します。

/**
  Not actual UA stylesheet code.
  For illustrative purposes only.
*/
body {
  color: CanvasText;
  background-color: Canvas
}

color-scheme CSS プロパティ

CSS 色調整モジュール レベル 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 によって実装されました。Rune は、CSS 色調整モジュール レベル 1 仕様の共同編集者でもあります。ヒーロー画像（Philippe Leone、Unsplash より）。