CSS light-dark() 函数

定义和用法

CSS 的 light-dark() 函数允许设置两个颜色值，如果用户设置了浅色主题，则返回第一个值；如果用户设置了深色主题，则返回第二个值。

要使用 light-dark() 函数，CSS 的 color-scheme 属性必须设置为 light dark。

提示：用户可以通过操作系统设置（浅色或深色模式）或浏览器设置来指定其颜色方案偏好。

实例

使用 light-dark() 函数启用两个颜色值设置：

: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 变量