light-dark()
light-dark() CSS <color> 函数 允许为属性设置两种颜色——通过检测开发者是否设置了浅色或深色配色方案，或者用户是否请求了浅色或深色主题，来返回这两种颜色选项之一——而无需将主题颜色封装在 prefers-color-scheme 媒体特性 查询中。用户可以通过其操作系统设置（例如，浅色或深色模式）或其用户代理设置来指示其配色方案偏好。light-dark() 函数允许提供两个颜色值，其中接受任何 <color> 值。如果用户偏好设置为 light 或未设置偏好，light-dark() CSS 颜色函数返回第一个值；如果用户偏好设置为 dark，则返回第二个值。
要启用对 light-dark() 颜色函数的支持，color-scheme 必须具有 light dark 值，通常在 :root 伪类上设置。
:root {
color-scheme: light dark;
}
body {
color: light-dark(#333b3c, #efefec);
background-color: light-dark(#efedea, #223a2c);
}
语法
/* Named color values */
color: light-dark(black, white);
/* RGB color values */
color: light-dark(rgb(0 0 0), rgb(255 255 255));
/* Custom properties */
color: light-dark(var(--light), var(--dark));
值
函数式表示法：light-dark(light-color, dark-color)
light-color-
用于浅色
color-scheme的<color>值。 dark-color-
用于深色
color-scheme的<color>值。
正式语法
<light-dark()> =
light-dark( <color> , <color> )
示例
根据配色方案设置颜色
默认情况下，在支持的浏览器中，light-dark() 颜色函数返回的颜色取决于通过操作系统设置（例如，浅色或深色模式）或用户代理设置的用户偏好。您还可以在浏览器的开发者工具中更改此设置。
HTML
我们包含三个部分，以启用针对浅色、深色以及根据用户首选配色方案选择的颜色。
<h1><code>light-dark()</code> CSS function</h1>
<section>
<h2>Automatic</h2>
<p>This section will react to the users system or user agent setting.</p>
</section>
<section class="light">
<h2>Light</h2>
<p>
This section will be light due to the <code>color-scheme: light;</code>.
</p>
</section>
<section class="dark">
<h2>Dark</h2>
<p>This section will be dark due to the <code>color-scheme: dark;</code>.</p>
</section>
CSS
我们为浅色和深色主题都包含了颜色。我们还在 :root 上定义了文档的 color-scheme，以启用整个文档的 light-dark() 颜色函数。
:root {
/* this has to be set to switch between light or dark */
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 {
/* forces light color-scheme */
color-scheme: light;
}
.dark {
/* forces dark color-scheme */
color-scheme: dark;
}
结果
规范
| 规范 |
|---|
| CSS 颜色模块第五版 # light-dark |
浏览器兼容性
加载中…