通过 css light-dark() 函数自适应用户设备的浅色主题和深色主题

实验性：这是一项实验性技术
在生产环境中使用前，请仔细查看浏览器兼容性表。

通过 light-dark() CSS <color> 函数，可以为一个属性设置两种颜色–通过检测开发人员是否设置了浅色或深色配色方案，或用户是否要求浅色或深色主题，返回两种颜色选项中的一种，而无需在 prefers-color-scheme 媒体特性查询中封装主题颜色。用户可以通过操作系统设置（如浅色或深色模式）或用户代理设置来表明自己对色彩方案的偏好。light-dark()函数可以提供两个颜色值，而任何<color>值都可以接受。如果用户的偏好设置为浅色或未设置偏好，light-dark() CSS 颜色函数将返回第一个值；如果用户的偏好设置为深色，则返回第二个值。

要支持 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() 语法

/* 颜色名称 */
color: light-dark(black, white);

/* RGB 颜色值 */
color: light-dark(rgb(0 0 0), rgb(255 255 255));

/* 自定义属性变量 */
color: light-dark(var(--light), var(--dark));

light-dark() 属性值

声明语法：light-dark(light-color, dark-color)

light-color

<color> value to be set for light color-scheme.

dark-color

<color> value to be set for dark color-scheme.

light-dark() 正式语法

<light-dark()> = 
          light-dark( <color> , <color> )

light-dark() 例子

根据配色方案设置颜色

默认情况下，在支持的浏览器中，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 {
  /* forces light color-scheme */
  color-scheme: light;
}
.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}

运行效果