このページは Cloud Translation API によって翻訳されました。

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

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

Bramus

CSS のシステムカラー

CSS では、さまざまなカラースペースのいずれかから多くの色を使用できます。たとえば、名前付きの色、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 に設定すると、要素がダークカラーパターンをサポートしていることを示します。

color-scheme の値を変更できるページ。変更すると、body 要素の宣言は同じままでも、明るい色から暗い色に、またはその逆にページの色が変化します。

`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;
  }
}

prefers-color-scheme を介して明るいモードと暗いモードに応答するページ。
色の値は、メディアクエリを使用して CSS で変更されます。

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);
}

prefers-color-scheme を使用して明るいモードと暗いモードに応答するページ。
色値は light-dark() を使用して変更されます。

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

prefers-color-scheme を使用してライトモードまたはダークモードに応答するページ。
色値は light-dark() を使用して変更されます。
いずれかのオプションを使用して、ライトモードまたはダークモードを強制的に設定できます。これは、color-scheme 値を操作することで実現できます。

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

CSS のシステムカラー

light-dark() のご紹介

実践的な応用

`light-dark()` のご紹介