兩行 CSS 輕松實作明暗模式

在 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() 函式，但已足夠應對當前瀏覽器功能的實際情況：

將功能範圍從廣泛的 schemed-value() 縮小到簡潔的 light-dark() ，使得該函式能夠按照當前的定義進行工作，而不需要將其納入長期的發展軌域。此外， light-dark() 的名稱和語法非常易於記憶和使用，最重要的是它為開發者提供了一個實用的解決方案，滿足了他們當前的需求。

瀏覽器支持

light-dark() 函式的瀏覽器支持如下：

可以透過以下程式碼來判斷當前使用的瀏覽器是否支持 CSS light-dark() 函式：

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


關註瀏覽器的支持情況：

相關連結

[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

往期推薦