CSS light-dark() 関数

定義と用法

CSSの light-dark() 関数は、2つの色値を設定することができます。ユーザーがライトテーマを設定した場合、最初の値が返されます。ダークテーマを設定した場合、第二の値が返されます。

使用するには、 light-dark() 関数、CSSの color-scheme 属性は light dark に設定する必要があります。

ヒント：ユーザーは、オペレーティングシステムの設定（ライトテーマまたはダークテーマモード）またはブラウザの設定を使用して、彼らの色スキーマの好みを指定できます。

例

使用方法 light-dark() この関数は、2つの色値の設定を有効にします：

:root {
  color-scheme: light dark;
  --light-bg: snow;
  --light-color: black;
  --dark-bg: black;
  --dark-color: snow;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

実際に試してみてください

CSS 文法

light-dark(lightcolor, darkcolor)

技術的な詳細

ブラウザのサポート

テーブルに表示されている数字は、その機能を最初に完全にサポートしたブラウザのバージョンを示しています。

相关页面

参考：CSS color-scheme 属性

参考：CSS var() 函数

教程：CSS 变量