CSS light-dark() 函數

定義和用法

CSS 的 light-dark() 函數允許設置兩個顏色值，如果用戶設置了淺色主題，則返回第一個值；如果用戶設置了深色主題，則返回第二個值。

要使用 light-dark() 函數，CSS 的 color-scheme 屬性必須設置為 light dark。

提示：用戶可以通過操作系統設置（淺色或深色模式）或瀏覽器設置來指定其顏色方案偏好。

實例

使用 light-dark() 函數啟用兩個顏色值設置：

:root {
  color-scheme: light dark;
  --light-bg: snow;
  --light-color: black;
  --dark-bg: black;
  --dark-color: snow;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

親自試一試

CSS 語法

light-dark(lightcolor, darkcolor)

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

相關頁面

參考：CSS color-scheme 屬性

參考：CSS var() 函數

教程：CSS 變量