CSS light-dark() 関数
Baseline
2024
*
Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
light-dark() は CSS の 関数で、2 つの色または 2 つの画像を受け取り、prefers-color-scheme メディア特性を使用することなく、アクティブな配色に基づいて色または画像を返します。
構文
/* 名前付きのカラー値 */
light-dark(
black,
white
);
/* RGB カラー値 */
light-dark(
rgb(0 0 0),
rgb(255 255 255)
);
/* 画像 URL 値 */
light-dark(
url("light-icon.png"),
url("dark-icon.png")
);
/* linear-gradient 値 */
light-dark(
linear-gradient(135deg, ghostwhite 20%, tomato),
linear-gradient(45deg, darkslategray 20%, gold)
);
/* カスタムプロパティ値 */
light-dark(
var(--light),
var(--dark)
);
値
light-dark() 関数には 2 つの形式があります。
- 2 つの
<color>値を受け入れた場合:<color>(ライト)-
color-schemeがlightであるか、設定されていない場合に使用される<color>値。 <color>(ダーク)-
color-schemeがdarkである場合に使用される<color>値。
- 2 つの
<image>値を受け入れた場合:<image>(ライト)-
color-schemeがlightであるか、設定されていない場合に使用される<image>値。 <image>(ダーク)-
color-schemeがdarkである場合に使用される<image>値。 none-
noneキーワードは、自然なサイズがない完全に透明な画像を生成します。
解説
ユーザーは、オペレーティングシステムの設定（例：ライトモードやダークモード）やユーザーエージェントの設定を通じて、好みの配色を示すことができます。light-dark() 関数は、任意の <color> 値が受け入れられる場合に、 2 つの色の値を指定することができます。light-dark() 関数は、ユーザーの環境設定が light に設定されている場合、または何も設定されていない場合に 1 つ目の値を返し、ユーザーの環境設定が dark に設定されている場合に 2 つ目の値を返します。
light-dark() 色の関数の対応を有効にするには、color-scheme に light dark という値がなければなりません。ふつうはこれを :root 擬似クラスに設定します。
:root {
color-scheme: light dark;
}
body {
color: light-dark(#333b3c, #efefec);
background-color: light-dark(#efedea, #223a2c);
}
形式文法
<light-dark()> =
<light-dark-color> |
<light-dark-image>
<light-dark-color> =
light-dark( <color> , <color> )
<light-dark-image> =
light-dark( [ <image> | none ] , [ <image> | none ] )
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
例
配色に基づいた色の設定
対応しているブラウザーでは、既定で、 light-dark() 色関数で返される色は、オペレーティングシステムの設定（ライトモードやダークモードなど）やユーザーエージェントの設定から設定されたユーザー環境に依存します。この設定は、ブラウザーの developer tools で変更することもできます。
HTML
ライト色、ダーク色、ユーザーの推奨する配色に基づいて選択した色を対象とすることができるように、 3 つの部分を設けています。
<h1>CSS の <code>light-dark()</code> 関数</h1>
<section>
<h2>自動</h2>
<p>この部分は、ユーザーシステムまたはユーザーエージェントの設定に反応します。</p>
</section>
<section class="light">
<h2>ライト</h2>
<p>
この部分は <code>color-scheme: light;</code> のために明色になっています。
</p>
</section>
<section class="dark">
<h2>ダーク</h2>
<p>この部分は <code>color-scheme: dark;</code> のために暗色になっています。</p>
</section>
CSS
ライトテーマとダークテーマの両方の色を含めています。また、文書全体の light-dark() 色関数を有効にするために、:root で文書の color-scheme を定義しています。
:root {
/* これは、明暗の切り替えを設定する必要がある */
color-scheme: light dark;
--light-bg: ghostwhite;
--light-color: darkslategray;
--light-code: tomato;
--dark-bg: darkslategray;
--dark-color: ghostwhite;
--dark-code: gold;
}
* {
background-color: light-dark(var(--light-bg), var(--dark-bg));
color: light-dark(var(--light-color), var(--dark-color));
}
code {
color: light-dark(var(--light-code), var(--dark-code));
}
light-dark() 関数を有効にするだけでなく、 color-scheme プロパティは文書内の部分のユーザーの配色を上書きすることができます。ページ部分に明暗の配色のみを使用するように強制するには、 color-scheme プロパティを light または dark に設定するだけです。
メモ: 一般的にはこのようなことはすべきではありません。ここではデモのために使用しています。ユーザーが環境設定をした場合、通常はユーザーの環境設定を上書きしてはいけません。
.light {
/* 強制的にライトモードにする */
color-scheme: light;
}
.dark {
/* 強制的にダークモードにする */
color-scheme: dark;
}
結果
配色に基づいてグラデーション背景を設定
この例では、前回の例と同じ HTML コードを使用していますが、<p> の代わりに <div> を設置しています。
CSS
まず、明るい色と暗い色の linear-gradient() の値をカスタムプロパティとして定義します。
:root {
/* ライトとダークのグラデーション */
--light-grad: linear-gradient(135deg, var(--light-bg) 20%, var(--light-code));
--dark-grad: linear-gradient(45deg, var(--dark-bg) 30%, var(--dark-code));
}
次に、light-dark() を使用して独自のプロパティを設定し、アクティブな配色に基づいて background-image プロパティを設定します。
section div {
background-image: light-dark(
var(--light-grad),
var(--dark-grad)
);
}
結果
仕様書
| Specification |
|---|
| CSS Color Module Level 5 # light-dark |