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