light-dark()

基线 2024

最新可用

自 2024 年 5 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中无法使用。

**light-dark()** CSS <color> 函数 使能够为属性设置两种颜色 - 通过检测开发人员是否已设置浅色或深色配色方案，或者用户是否已请求浅色或深色颜色主题，返回两种颜色选项之一 - 无需将主题颜色包含在 prefers-color-scheme 媒体特性 查询中。用户可以通过其操作系统设置（例如浅色或深色模式）或其用户代理设置来指示其配色方案偏好。light-dark() 函数使能够提供两个颜色值，其中接受任何 <color> 值。light-dark() CSS 颜色函数在用户的偏好设置为 light 或未设置偏好时返回第一个值，在用户的偏好设置为 dark 时返回第二个值。

要启用对 light-dark() 颜色函数的支持，color-scheme 必须具有 light dark 值，通常在 :root 伪类 上设置。

css
:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

语法

css
/* 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> 值，用于设置为浅色 color-scheme。

dark-color

<color> 值，用于设置为深色 color-scheme。

正式语法

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

示例

根据配色方案设置颜色

默认情况下，在支持的浏览器中，light-dark() 颜色函数返回的颜色取决于用户通过操作系统设置（例如浅色或深色模式）或用户代理设置设置的偏好。您也可以在浏览器的 开发者工具 中更改此设置。

HTML

我们包含三个部分，使能够针对浅色、深色以及根据用户首选配色方案选择的颜色。

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() 颜色函数。

css
: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，可以强制页面部分仅使用浅色或深色配色方案。

注意： 一般情况下，不应该这样做，我们在这里使用它用于演示目的。如果用户已经设置了偏好，通常不应覆盖其偏好。

css
.light {
  /* forces light color-scheme */
  color-scheme: light;
}
.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}

结果

规范

规格
CSS 颜色模块级别 5
# 亮暗

浏览器兼容性

BCD 表格只在浏览器中加载

另请参见