CSSのcolor-schemeとは？ライト・ダーク表示に対応する方法

WEBサイトをダーク表示に対応させたつもりでも、日付入力欄や選択メニューだけが明るいままになることがあります。こうしたブラウザー標準の部品を含め、対応できる配色モードを伝えるのがCSSのcolor-schemeです。ただし、これだけでサイト内の画像・見出し・ボタンが自動的に配色変更されるわけではありません。役割と使い方を、イベント参加日の入力フォームで確認します。

color-schemeはブラウザーに対応モードを知らせる

CSS（WEBページの見た目を指定するルール）のcolor-schemeは、要素がライト表示・ダーク表示のどちらに対応できるかをブラウザーへ伝えるプロパティです。color-scheme: light dark;は両方に対応する指定で、実際に使うモードは利用者のOSやブラウザーの設定などを踏まえて選ばれます。ページ側に切替ボタンを作る命令ではありません。

この指定は、ブラウザーが用意する入力欄・選択メニュー・スクロールバーなどの既定の見た目や、システムの色に影響します。日付入力のカレンダーなどはブラウザーごとに作りが異なるため、すべての環境で同じ形や色になるとは限りません。

対して、制作者がbackground-colorやcolorで指定した独自の配色は、color-schemeだけでは適切に切り替わりません。ライト用とダーク用の色を別に準備し、light-dark()関数や@media (prefers-color-scheme: dark)で使い分けます。light-dark(明るい場合の色, 暗い場合の色)は、その場所で選ばれたモードに応じて色を返します。

日付入力フォームをライト・ダークの両方に対応させる例

イベント案内ページの予約日検索フォームを想定します。ここではサイト全体ではなく、フォームを包む領域にcolor-scheme: light dark;を設定します。標準の日付入力欄や選択欄に対応モードを伝えつつ、独自の背景・文字・ボタン色はlight-dark()で指定します。

ライト表示では、外側に淡い青灰色■#F3F6FB、フォーム背景に白■#FFFFFF、文字に濃い青灰色■#233247を使います。入力欄の枠線はグレー■#64748B、検索ボタンは青■#1C5A91と白文字■#FFFFFFの組み合わせです。

ダーク表示では、外側に濃紺■#101827、フォーム背景に青みのある暗色■#1C2B3F、文字にほぼ白の青■#F3F7FDを使います。入力枠線を淡い青灰色■#B0C0D7に変更し、検索ボタンは明るい青■#A9D2FFと濃紺文字■#142238にします。

<div class="booking-demo">
  <form class="booking-form" action="/event-search/" method="get">
    <h2>イベント参加日の確認</h2>
    <label for="event-date">希望日</label>
    <input id="event-date" name="date" type="date" required>
    <label for="event-style">参加方法</label>
    <select id="event-style" name="style">
      <option value="online">オンライン</option>
      <option value="venue">会場参加</option>
    </select>
    <button type="submit">開催日を探す</button>
  </form>
</div>

.booking-demo {
  color-scheme: light dark;
  padding: 24px;
  background-color: light-dark(
    rgb(243 246 251), rgb(16 24 39));
}
.booking-form {
  max-width: 34rem;
  padding: 24px;
  border-radius: 12px;
  background-color: light-dark(
    rgb(255 255 255), rgb(28 43 63));
  color: light-dark(
    rgb(35 50 71), rgb(243 247 253));
}
.booking-form label {
  display: block;
  margin: 12px 0 6px;
}
.booking-form input,
.booking-form select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 2px solid light-dark(
    rgb(100 116 139), rgb(176 192 215));
  background-color: light-dark(
    rgb(255 255 255), rgb(28 43 63));
  color: inherit;
}
.booking-form button {
  margin-top: 16px;
  padding: 12px 18px;
  border: 0;
  border-radius: 8px;
  background-color: light-dark(
    rgb(28 90 145), rgb(169 210 255));
  color: light-dark(
    rgb(255 255 255), rgb(20 34 56));
}
.booking-form :is(input, select, button):focus-visible {
  outline: 3px solid light-dark(
    rgb(28 90 145), rgb(169 210 255));
  outline-offset: 3px;
}

CSS内のrgb()は、赤・緑・青の3成分で色を表す書き方です。light-dark()は1つ目をライト用、2つ目をダーク用として扱います。:focus-visibleはキーボード操作などで入力欄やボタンに焦点が当たったとき、枠線を表示する指定です。送信先の/event-search/は例示なので、実際の検索処理があるURLへ変更してください。

片方だけ対応する場合と、コントラストの注意点

この例の文字とフォーム背景のコントラスト比は、ライト表示で約12.97:1、ダーク表示で約13.32:1です。ボタン文字とボタン背景はそれぞれ約7.19:1、約10.15:1で、WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）が通常サイズの文字に求める4.5:1を上回ります。入力枠線とフォーム背景の比率はライトで約4.76:1、ダークで約7.75:1、フォーカス枠線とフォーム背景は約7.19:1と約9.10:1で、操作に必要な非テキスト表示の目安3:1も上回ります。

これらは指定した色の組み合わせの計算結果です。ブラウザー独自の日付アイコンや選択メニューの見え方、フォーカス表示の周囲の色は実機でも確かめます。また、サイトの別の部分がダーク表示に未対応なら、ページ全体の:rootに安易にcolor-scheme: light dark;を設定しないでください。ダーク表示でブラウザーが既定の文字を明るい色にしても、背景を明るい色のまま固定していると、文字と背景が近い明るさになり、読みにくくなる場合があります。

サイト全体が両方に対応できた段階では:rootへ設定し、必要に応じてHTMLの<head>内に<meta name="color-scheme" content="light dark">をCSSより前に置く方法もあります。古いブラウザーではlight-dark()を使えない場合があるため、対象環境に応じて固定色やprefers-color-schemeによる代替指定を検討します。HueRollではライト・ダークの自動切替を設定するのではなく、各モードに使う色候補と選択色の白・黒に対するコントラストを検討する用途に使えます。