兩行 CSS 輕松實現明暗模式

作者：CUGGZ 2024-02-20 12:49:00

如今，CSS提供了一種更為簡便的方法：??light-dark()??函數。此函數能夠根據當前顏色方案自動選擇兩種顏色中的一種進行輸出，從而實現顏色的自適應顯示。

在 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 輕松實現明暗模式

以前的明暗模式實現

未來的明暗模式實現

非顏色值呢？

瀏覽器支持

相關鏈接