light-dark() を使用して CSS のカラーパターンに依存する色を使用する

システム色は、現在使用されている color-scheme 値に反応できます。light-dark() 関数は、作成者に同じ機能を公開します。

Bramus

CSS のシステムカラー

CSS では、多数の色空間のうち 1 つからさまざまな色を使用できます。たとえば、名前付きの色、16 進数の色、特定の色空間にリンクされた色関数、より汎用的な color() 関数を使用できます。

たとえば、名前付きの色 cornflowerblue は、#6495ED、hsl(218.54deg 79.19% 66.08%)、color(display-p3 0.43 0.58 0.9) としても表すことができます。

これらのさまざまな名前や形式に加えて、CSS には、CSS カラー モジュール レベル 4 で指定されている、システムカラーとして記述されている色があります。これらのシステムカラーはブラウザによって定義される色であり、キーワードで表されます。

たとえば、システム色 Canvas（<canvas> 要素とは異なります）は、「アプリケーション コンテンツまたはドキュメントの背景」を表します。CanvasText は「アプリのコンテンツまたはドキュメント内のテキスト」を表し、CanvasText と組み合わせて使用することを想定しています。

CSS では次のように使用します。

body {
  color: CanvasText;
  background-color: Canvas;
}

デフォルトでは、CanvasText は black に近い色になり、Canvas は white に近い色になります。実際の実装はブラウザによって異なります。たとえば、Chrome では CanvasText が #121212 になりますが、Safari では少し明るい #1e1e1e として指定されます。

これらのシステム色の隠れたパワーは、color-scheme プロパティの計算値に応答できることです。たとえば、使用される color-scheme が dark の場合、CanvasText と Canvas の値が入れ替わります。

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

次のデモでは、:root に設定されている color-scheme の値を変更して、ページの応答を確認できます。

• light dark に設定すると、要素がライトモードとダークモードの両方をサポートしていることを示します。どの値を使用するかは、prefers-color-scheme メディア条件の値に応じて選択します。
• light に設定すると、要素がライト カラーパターンをサポートしていることを示します。
• dark に設定すると、要素がダーク カラーパターンをサポートしていることを示します。

light-dark() のご紹介

これまで、使用された color-scheme 値に反応することは、システムカラーに予約されていました。CSS カラー モジュール レベル 5 で指定されている light-dark() のおかげで、同じ機能が使えるようになりました。

light-dark() は 2 つの引数を受け入れる関数で、どちらも <color> である必要があります。使用しているカラーパターンに応じて、どちらか一方が選択されます。

• 使用されるカラーパターンが light または不明な場合、最初の値の計算値が返されます。
• 使用されたカラーパターンが dark の場合は、2 番目の色の計算値が返されます。

light-dark() の結果は <color> です。<color> が使用できる場所であれば、CSS で使用できます。たとえば、color プロパティや background-color プロパティだけでなく、linear-gradient() などの関数でも使用できます。

次の例では、使用される background-color は、ダークモードでは #333、ライトモード（または不明なモード）では #ccc です。

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

light-dark() を正しく動作させるには、color-scheme を指定する必要があります。このプロパティは継承されるため、通常は :root に設定しますが、必要に応じて特定の要素に設定することもできます。

実践的な応用

次の例では、いくつかのカスタム プロパティがページ上の色を表しています。ダークモードに対応するため、これらのカスタム プロパティの値は、prefers-color-scheme メディア条件で別の値で上書きされます。

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

light-dark() を使用すると、このコードを簡素化できます。color-scheme は :root で light dark に設定されているため、OS を明るいモードから暗いモードに変更したり、その逆に変更したりすると、これらの色の値が自動的に変更されます。

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

さらに、color-scheme を dark または light に設定することで、DOM の特定のサブツリーでライトモードまたはダークモードのみを使用するように強制することもできます。次の例では、これは :root に適用されます。