两行 CSS 轻松实现明暗模式-51CTO.COM

在 Web 开发中，为了根据用户的偏好模式（明暗模式）调整网页颜色，我们以前可能会使用媒体查询（prefers-color-scheme）。如今，CSS提供了一种更为简便的方法：light-dark()函数。此函数能够根据当前颜色方案自动选择两种颜色中的一种进行输出，从而实现颜色的自适应显示。

以前的明暗模式实现

要根据所使用的浅色模式或深色模式更改颜色值，可以使用 prefers-color-scheme 媒体查询来更改自定义属性的值：

:root {
  --text-color: #333; /* 浅色模式的值 */
}

@media (prefers-color-scheme: dark) {
  --text-color: #ccc; /* 深色模式的值 */
}

在实现深色模式时，通常会出现一堆重复的CSS变量，用于设置每种模式的值。然后，CSS 将使用这些自定义属性进行实际声明。

body {
  color: var(--text-color);
}

未来的明暗模式实现

CSS Color Module Level 5 Specification[1] 新增了一个 light-dark() 函数。该函数接受两个颜色值作为其参数。根据正在使用的颜色方案，它将输出第一个或第二个颜色参数。

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

根据规范，如果使用的颜色方案是light或未知，则该函数计算为第一种颜色的计算值；如果使用的颜色方案是dark，则计算为第二种颜色的计算值。

使用的颜色方案不仅是用户选择的亮暗模式，还需要根据color-scheme属性的值确定使用的颜色方案。color-scheme属性可以指示元素使用哪种颜色方案进行渲染，这个方案会与用户的偏好进行协商，最终确定使用的颜色方案。因此，在使用light-dark()函数时，还需要在CSS中包含对应的color-scheme声明，以确保函数能够正确工作。

:root {
  color-scheme: light dark;
}

:root {
  --text-color: light-dark(#333, #ccc); 
}

对于上面的代码，在浅色模式下返回第一个值，在深色模式下返回第二个值。

可以在特定元素上设置color-scheme，以覆盖默认值，从而强制元素进入所需的模式。

.dark {
  color-scheme: dark; 
}

对于上面的代码，该元素及其子元素上的 light-dark() 将始终返回 dark对应的值。

下面来看一个简单的例子。以下Demo将展示几个带有.auto类的<div>元素。这些元素能够智能地适应系统颜色模式，自动切换为浅色或深色主题。而带有.light或.dark类的<div>元素则会强制应用对应的颜色模式。

#demo {
	color-scheme: light dark;
	
	.dark {
		color-scheme: dark;
	}

	.light {
		color-scheme: light;
	}
	
	& div {
		background: light-dark(#d4d4d4, #000);
		color: light-dark(#333, #ccc);
	}
}

非颜色值呢？

light-dark() 函数的设计初衷是为了提供一个简单的中间解决方案，仅支持亮色和暗色的切换，并仅适用于颜色值。这一设计选择是有意为之，因为它旨在为最终的解决方案提供一个渐进的过渡。

根据 CSS 工作组的提议，未来的目标是引入一个更强大的函数，暂命名为 schemed-value()。这个函数将具有以下特性：

能够响应任何颜色方案值，不仅限于亮色和暗色。
支持除颜色之外的多种类型的值，以提供更广泛的定制选项。

它可能看起来像这样：

:root {
  color-scheme: dark light custom;
}

body {
  color: schemed-value(light hotpink, dark lime, custom rebeccapurple);
}

当前只有light-dark()函数，但已足够应对当前浏览器功能的实际情况：

它仅支持浅色和深色模式，因为当前浏览器还不支持color-scheme中的<custom-ident>，因此支持其他模式尚无实际意义。
它仅处理<color>值，因为解析器需要提前知道正在解析的值类型。light-dark()被明确地定义为处理<color>值。

将功能范围从广泛的schemed-value()缩小到简洁的light-dark()，使得该函数能够按照当前的定义进行工作，而不需要将其纳入长期的发展轨道。此外，light-dark()的名称和语法非常易于记忆和使用，最重要的是它为开发者提供了一个实用的解决方案，满足了他们当前的需求。

浏览器支持

light-dark() 函数的浏览器支持如下：

Chromium (Blink)： ⚠️ 已表示发布意图。预期将包含在 Chrome 123 中。
Firefox (Gecko)： ✅ Firefox 120 开始支持
Safari (WebKit)： ⚠️ 已在主分支的 WebKit 中实现该功能。预期将包含在 Safari TP 188 中。

可以通过以下代码来判断当前使用的浏览器是否支持 CSS light-dark()函数：

@supports(color: light-dark(#fff, #000)) {
	#output::after {
		content: "✅ 浏览器支持 light-dark()";
		background-color: #00ff002b;
	}
}

关注浏览器的支持情况：

Chromium/Blink: Issue #1490618[2] — 已开始（开放状态）
Firefox/Gecko: Issue #1856999[3] — 已解决
Safari/WebKit: Issue #262914[4] — 已解决

两行 CSS 轻松实现明暗模式

以前的明暗模式实现

未来的明暗模式实现

非颜色值呢？

浏览器支持

相关链接