在 Web 開發(fā)中，為了根據(jù)用戶的偏好模式（明暗模式）調(diào)整網(wǎng)頁顏色，我們以前可能會(huì)使用媒體查詢（prefers-color-scheme）。如今，CSS提供了一種更為簡(jiǎn)便的方法：light-dark()函數(shù)。此函數(shù)能夠根據(jù)當(dāng)前顏色方案自動(dòng)選擇兩種顏色中的一種進(jìn)行輸出，從而實(shí)現(xiàn)顏色的自適應(yīng)顯示。

以前的明暗模式實(shí)現(xiàn)

要根據(jù)所使用的淺色模式或深色模式更改顏色值，可以使用 prefers-color-scheme 媒體查詢來更改自定義屬性的值：

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

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

在實(shí)現(xiàn)深色模式時(shí)，通常會(huì)出現(xiàn)一堆重復(fù)的CSS變量，用于設(shè)置每種模式的值。然后，CSS 將使用這些自定義屬性進(jìn)行實(shí)際聲明。

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

未來的明暗模式實(shí)現(xiàn)

CSS Color Module Level 5 Specification[1] 新增了一個(gè) light-dark() 函數(shù)。該函數(shù)接受兩個(gè)顏色值作為其參數(shù)。根據(jù)正在使用的顏色方案，它將輸出第一個(gè)或第二個(gè)顏色參數(shù)。

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

根據(jù)規(guī)范，如果使用的顏色方案是light或未知，則該函數(shù)計(jì)算為第一種顏色的計(jì)算值；如果使用的顏色方案是dark，則計(jì)算為第二種顏色的計(jì)算值。

使用的顏色方案不僅是用戶選擇的亮暗模式，還需要根據(jù)color-scheme屬性的值確定使用的顏色方案。color-scheme屬性可以指示元素使用哪種顏色方案進(jìn)行渲染，這個(gè)方案會(huì)與用戶的偏好進(jìn)行協(xié)商，最終確定使用的顏色方案。因此，在使用light-dark()函數(shù)時(shí)，還需要在CSS中包含對(duì)應(yīng)的color-scheme聲明，以確保函數(shù)能夠正確工作。

:root {
  color-scheme: light dark;
}

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

對(duì)于上面的代碼，在淺色模式下返回第一個(gè)值，在深色模式下返回第二個(gè)值。

可以在特定元素上設(shè)置color-scheme，以覆蓋默認(rèn)值，從而強(qiáng)制元素進(jìn)入所需的模式。

.dark {
  color-scheme: dark; 
}

對(duì)于上面的代碼，該元素及其子元素上的 light-dark() 將始終返回 dark對(duì)應(yīng)的值。

下面來看一個(gè)簡(jiǎn)單的例子。以下Demo將展示幾個(gè)帶有.auto類的<div>元素。這些元素能夠智能地適應(yīng)系統(tǒng)顏色模式，自動(dòng)切換為淺色或深色主題。而帶有.light或.dark類的<div>元素則會(huì)強(qiáng)制應(yīng)用對(duì)應(yīng)的顏色模式。

#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() 函數(shù)的設(shè)計(jì)初衷是為了提供一個(gè)簡(jiǎn)單的中間解決方案，僅支持亮色和暗色的切換，并僅適用于顏色值。這一設(shè)計(jì)選擇是有意為之，因?yàn)樗荚跒樽罱K的解決方案提供一個(gè)漸進(jìn)的過渡。

根據(jù) CSS 工作組的提議，未來的目標(biāo)是引入一個(gè)更強(qiáng)大的函數(shù)，暫命名為 schemed-value()。這個(gè)函數(shù)將具有以下特性：

• 能夠響應(yīng)任何顏色方案值，不僅限于亮色和暗色。
• 支持除顏色之外的多種類型的值，以提供更廣泛的定制選項(xiàng)。

它可能看起來像這樣：

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

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

當(dāng)前只有l(wèi)ight-dark()函數(shù)，但已足夠應(yīng)對(duì)當(dāng)前瀏覽器功能的實(shí)際情況：

• 它僅支持淺色和深色模式，因?yàn)楫?dāng)前瀏覽器還不支持color-scheme中的<custom-ident>，因此支持其他模式尚無實(shí)際意義。
• 它僅處理<color>值，因?yàn)榻馕銎餍枰崆爸勒诮馕龅闹殿愋?。light-dark()被明確地定義為處理<color>值。

將功能范圍從廣泛的schemed-value()縮小到簡(jiǎn)潔的light-dark()，使得該函數(shù)能夠按照當(dāng)前的定義進(jìn)行工作，而不需要將其納入長期的發(fā)展軌道。此外，light-dark()的名稱和語法非常易于記憶和使用，最重要的是它為開發(fā)者提供了一個(gè)實(shí)用的解決方案，滿足了他們當(dāng)前的需求。

瀏覽器支持

light-dark() 函數(shù)的瀏覽器支持如下：

• Chromium (Blink)： ?? 已表示發(fā)布意圖。預(yù)期將包含在 Chrome 123 中。
• Firefox (Gecko)： ? Firefox 120 開始支持
• Safari (WebKit)： ??  已在主分支的 WebKit 中實(shí)現(xiàn)該功能。預(yù)期將包含在 Safari TP 188 中。

可以通過以下代碼來判斷當(dāng)前使用的瀏覽器是否支持 CSS light-dark()函數(shù)：

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

關(guān)注瀏覽器的支持情況：

• Chromium/Blink: Issue #1490618[2] — 已開始（開放狀態(tài)）
• Firefox/Gecko: Issue #1856999[3] — 已解決
• Safari/WebKit: Issue #262914[4] — 已解決

相關(guān)鏈接

[1]CSS Color Module Level 5 Specification： https://drafts.csswg.org/css-color-5/。

[2]Issue #1490618： https://bugs.chromium.org/p/chromium/issues/detail?id=1490618。

[3]Issue #1856999： https://bugzilla.mozilla.org/show_bug.cgi?id=1856999。

[4]Issue #262914： https://bugs.webkit.org/show_bug.cgi?id=262914。