Hello，大家好，我是 Sunday。

說起主題切換，很多同學肯定是不陌生的。在過去我的很多課程中都講到了主題切換的功能。它的實現原理簡單一句話描述就是：通過不同的狀態標記（light || dark），使用不同的 css，從而達到不同的樣式。

如果使用 原生 css 實現的話，那么則需要借助 @media (prefers-color-scheme: <value>)，代碼大概是這樣的：

@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background-color: #222;
  }
}

@media (prefers-color-scheme: light) {
  body {
    color: #333;
    background-color: #fff;
  }
}

這樣的代碼標記著我們需要在 dark 模式下指定一套 css，然后在 light 模式下指定另外一套 css。雖然可以實現主題切換的功能，但它的缺點也很明顯：

• 代碼冗長：需要為每個模式定義單獨的樣式塊。
• 維護困難：當項目中有大量深淺模式樣式時，修改和擴展變得復雜。

因此，這種方式并不被我們所喜歡（大家在工作中應該也很少見這樣的代碼），導致我們更多的時候會使用一些庫（如：tailwindcss）來實現主題切換。

但是，隨著一個全新的 css 屬性函數 light-dark()，一切不一樣了！

圖片

1. 什么是 light-dark()？

1.1 基本特性

light-dark() 是一種新的 CSS 屬性值函數，用于在 淺色模式 和 深色模式 下分別指定不同的樣式值。

以往我們需要使用 @media (prefers-color-scheme) 媒體查詢來處理深淺模式，代碼量大且重復。而 light-dark() 通過一個簡單的函數調用，直接在單條樣式規則中定義深淺模式的不同表現，大大簡化了開發工作。

// <light-value> 淺色模式下的樣式值。
// <dark-value> 深色模式下的樣式值。
property: light-dark(<light-value>, <dark-value>);

以設置背景色 + 字體顏色為例，light-dark() 可以輕松在淺色和深色模式之間切換：

// 在淺色模式下，背景色為白色（#ffffff），字體為黑色（#333333）
// 在深色模式下，背景色為深灰色（#1e1e1e），字體為白色（#f0f0f0）
body {
  background-color: light-dark(#ffffff, #1e1e1e);
  color: light-dark(#333333, #f0f0f0);
}

是不是賊簡單了！對比下傳統的 @media (prefers-color-scheme: <value>) 的方式，就更能體現出差異了

// 傳統的 @media (prefers-color-scheme: ...) 方案
@media (prefers-color-scheme: dark) {
  body {
    color: #1e1e1e;
    background-color: #f0f0f0;
  }
}

@media (prefers-color-scheme: light) {
  body {
    color: #ffffff;
    background-color: #333333;
  }
}

1.2 進階用法

除了剛才的基本使用方式之外，light-dark() 還可以與 CSS 變量結合，動態定義深淺模式下的值：

:root {
  --bg-color: light-dark(#ffffff, #1e1e1e);
  --text-color: light-dark(#333333, #f0f0f0);
}

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

通過這種方式，可以輕松實現主題切換的全局樣式管理。

2. light-dark() 的兼容性

截至目前（2024年11月），light-dark() 的瀏覽器支持場景如下：

圖片

根據 mdn 的數據，可以看到目前大部分的瀏覽器都支持了 light-dark() 屬性。

如果你的項目使用場景包含舊版本的瀏覽器，那么可以添加如下兼容方案：

body {
  background-color: #ffffff; /* 默認值 */
  background-color: light-dark(#ffffff, #1e1e1e);
}