css未來：使用light-dark()切換主題色

要根據使用的是淺色模式還是深色模式來更改顏色，我們通常會使用 prefers-color-scheme 媒體查詢。為了讓代碼實現變得更容易，CSS 現在附帶了一個名為 light-dark() 的實用函數。該函數接受兩個顏色值作為其參數。根據我們正在使用的配色方案，它將使用第一個或第二個參數。

使用 prefers-color-scheme 切換主題色

要根據所使用的淺色模式或深色模式更改顏色值（或任何其他值），我們通常會使用媒體prefers-color-scheme 查詢來更改自定義屬性的值：

:root {--text-color: #333; /* 淺色主題色 */
}@media (prefers-color-scheme: dark) {:root {--text-color: #ccc; /* 深色主題色 */}
}

實現深色模式時，通常會得到一堆重復的 CSS 變量，這些變量為每種模式設置值。然后，CSS 的其余部分將這些自定義屬性用于實際聲明。

body {color: var(--text-color);
}

使用 light-dark() 切換主題色

CSS 顏色模塊第 5 級規范 的新增功能是 light-dark() 功能。該函數接受兩個顏色值作為其參數。根據我們正在使用的顏色方案，它將使用第一個或第二個顏色參數。

light-dark(<color>, <color>);

根據規格：

如果使用的配色方案為 light 或未知，則此函數計算第一種顏色的計算值；如果使用的配色方案為dark，則此函數計算第二個顏色的計算值。

使用的配色方案不僅基于用戶的淺色/深色模式設置，還基于屬性的值 color-scheme。這類似于系統顏色的計算方式。

color-scheme屬性允許元素指示其設計用于渲染的配色方案。這些值是根據用戶的偏好進行協商的，從而產生使用的配色方案。

這意味著，為了 light-dark() 起作用，我們還必須包含一份 color-scheme 聲明。

:root {color-scheme: light dark;
}:root {--text-color: light-dark(#333, #ccc); /* 在淺色模式使用#333，在深色模式使用#ccc */
}

因為 color-scheme 的聲明方式，這也意味著我們可以覆蓋每個元素的值，以強制其進入某種模式：

.dark {color-scheme: dark; /* 在.dark元素上使用 light-dark，.dark元素的所有子元素都是深色模式 */
}

light-dark()看起來跟Chromium 內部的 -internal-light-dark()很類似。基于此功能， CSS 工作組內提出了向作者公開類似功能的提案。結果就誕生了 light-dark()。

-internal-light-dark() 適用于任何類型的值，而 light-dark() 只能用于顏色。

其他非顏色值能否支持

light-dark() 的功能相當有限：它只能處理 light/dark，并且只能處理值。這是正確的，也是非常有意的，因為這是邁向最終解決方案的中間步驟。

正如CSS 工作組問題中所提出的，最終目標是在未來（暫定）有一個命名的函數。該函數功能可以：

• 響應 color-scheme 的任意值。
• 返回的不僅僅是 值

它可能看起來像這樣：

:root {color-scheme: dark light custom;
}body {color: schemed-value(light hotpink, dark lime, custom rebeccapurple);
}

但是，就目前而言，我們“僅”擁有 light-dark()，而且我個人認為這很好，因為它與當今瀏覽器可以執行的操作的現實相符：

• 它只支持 light/dark 。因為瀏覽器現在不支持incolor-scheme，所以現在支持其他值是沒有用的。
• 它只能處理值，因為解析器需要提前知道它正在解析的值的類型。light-dark()被明確定義為一個值。

light-dark() 的名稱和語法非常容易記住，易于使用。

當 schemed-value() 成為一個事物時，light-dark()就會成為它的語法糖：

light-dark(<color>, <color>); = schemed-value(light <color>, dark <color>);

瀏覽器支持

目前只有 firefox 支持，如果我們想體驗這個功能，可以使用firefox進行測試。