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 カラー モジュール レベル 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 に適用されます。