Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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()` のご紹介

Browser Support

Source

これまで、使用された color-scheme 値への対応は、システムカラー用に予約されていました。CSS Color Module Level 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() のおかげで、このコードを簡素化できます。: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);
}

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() を使用して CSS のカラーパターンに依存する色を使用する

`light-dark()` のご紹介