Hello，大家好，我是 Sunday。

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

如果使用 原生 css 實(shí)現(xiàn)的話，那么則需要借助 @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;
  }
}

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

• 代碼冗長：需要為每個(gè)模式定義單獨(dú)的樣式塊。
• 維護(hù)困難：當(dāng)項(xiàng)目中有大量深淺模式樣式時(shí)，修改和擴(kuò)展變得復(fù)雜。

因此，這種方式并不被我們所喜歡（大家在工作中應(yīng)該也很少見這樣的代碼），導(dǎo)致我們更多的時(shí)候會(huì)使用一些庫（如：tailwindcss）來實(shí)現(xiàn)主題切換。

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

圖片

1. 什么是 light-dark()？

1.1 基本特性

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

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

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

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

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

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

// 傳統(tǒng)的 @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 進(jìn)階用法

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

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

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

通過這種方式，可以輕松實(shí)現(xiàn)主題切換的全局樣式管理。

2. light-dark() 的兼容性

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

圖片

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

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

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