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 Color Module Level 4 で指定されるシステムカラーと呼ばれる色があります。これらのシステムカラーはブラウザで定義され、キーワードで表されます。

たとえば、システムカラー Canvas（<canvas> 要素と混同しないでください）は、「アプリのコンテンツやドキュメントの背景」を表します。これは「アプリのコンテンツまたはドキュメント内のテキスト」を表す 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 Color Module レベル 5 で指定される light-dark() を使用して、同じ機能を使用できるようになりました。

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

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

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

次の例では、使用されている背景色は、ダークモードでは #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() を使用すると、このコードを簡素化できます。:root で color-scheme が 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 に適用されます。