兩行CSS 輕鬆實現明暗模式

在Web 開發中，為了根據使用者的偏好模式（明暗模式）調整網頁顏色，我們以前可能會使用媒體查詢（prefers-color-scheme）。如今，CSS提供了一種更簡單的方法：light-dark()函數。此函數能夠根據目前顏色方案自動選擇兩種顏色中的一種進行輸出，從而實現顏色的自適應顯示。

以前的明暗模式實現

若要根據所使用的淺色模式或深色模式變更色彩值，可以使用 prefers-color-scheme 媒體查詢來變更自訂屬性的值：

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

@media (prefers-color-scheme: dark) {
  --text-color: #ccc; /* 深色模式的值 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

在實現深色模式時，通常會出現一堆重複的CSS變量，用於設定每種模式的值。然後，CSS 將使用這些自訂屬性進行實際聲明。

body {
  color: var(--text-color);
}
  • 1.
  • 2.
  • 3.

未來的明暗模式實現

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

light-dark(<color>, <color>);
  • 1.

根據規範，如果使用的顏色方案是light或未知，則函數計算為第一種顏色的計算值；如果使用的顏色方案是dark，則計算為第二種顏色的計算值。

使用的顏色方案不僅是使用者選擇的亮暗模式，還需要根據color-scheme屬性的值來決定使用的顏色方案。color-scheme屬性可以指示元素使用哪種顏色方案進行渲染，這個方案會與使用者的偏好進行協商，最終決定使用的顏色方案。因此，在使用light-dark()函數時，還需要在CSS中包含對應的color-scheme聲明，以確保函數能夠正確運作。

:root {
  color-scheme: light dark;
}

:root {
  --text-color: light-dark(#333, #ccc); 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

對於上面的程式碼，在淺色模式下傳回第一個值，在深色模式下傳回第二個值。

可以在特定元素上設定color-scheme，以覆寫預設值，從而強制元素進入所需的模式。

.dark {
  color-scheme: dark; 
}
  • 1.
  • 2.
  • 3.

對於上面的程式碼，該元素及其子元素上的 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);
	}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

非顏色值呢？

light-dark() 函數的設計初衷是為了提供一個簡單的中間解決方案，僅支援亮色和暗色的切換，並僅適用於色彩值。這個設計選擇是有意為之，因為它旨在為最終的解決方案提供一個漸進的過渡。

根據CSS 工作小組的提議，未來的目標是引入一個更強大的函數，暫命名為 schemed-value()。這個函數將具有以下特性：

  • 能夠響應任何顏色方案值，不僅限於亮色和暗色。
  • 支援顏色以外的多種類型的值，以提供更廣泛的自訂選項。

它可能看起來像這樣：

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

body {
  color: schemed-value(light hotpink, dark lime, custom rebeccapurple);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

目前只有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;
	}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

注意瀏覽器的支援情況：

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