兩行CSS 輕鬆實現明暗模式

2024.02.20

在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] — 已解決