引言

我們?cè)谠L問(wèn)某個(gè)站點(diǎn)時(shí)，有時(shí)可能會(huì)發(fā)現(xiàn)這樣一種場(chǎng)景：該站點(diǎn)在白天訪問(wèn)時(shí)，它是亮色主題；當(dāng)晚上訪問(wèn)時(shí)，它就變成暗色主題了。而且這種主題的切換是自動(dòng)的，他會(huì)隨系統(tǒng)主題變化而改變。如果我們要將這種功能應(yīng)用在自己站點(diǎn)上，該如何實(shí)現(xiàn)呢？

本文涉及三個(gè)相關(guān)知識(shí)點(diǎn)：

• 設(shè)置主題色
• 檢查主題色
• 監(jiān)聽(tīng)主題色變化

設(shè)置主題色

在 CSS 中，提供了一種設(shè)置系統(tǒng)主題色的媒體特性 prefers-color-scheme，該特性通常提供兩個(gè)值 light 和 dark。顧名思義，這兩個(gè)值一個(gè)代表 日間模式，一個(gè)表示 夜間模式。并且他們的兼容性也是最好的。

這里有一個(gè)簡(jiǎn)單的例子，可以很方便的通過(guò) CSS 實(shí)現(xiàn)系統(tǒng)主題色：

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }
@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}
@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

當(dāng)系統(tǒng)主題為日間模式時(shí)，會(huì)應(yīng)用上面的 light 主題樣式；當(dāng)系統(tǒng)主題為夜間模式時(shí)，會(huì)應(yīng)用上面的 dark 主題樣式。

實(shí)際開發(fā)中，我們會(huì)將項(xiàng)目用到的色值抽離出來(lái)作為全局的公共變量，方便我們對(duì)項(xiàng)目整體的色值管理。如：

:root {
  // Light Theme
  --PrimaryBackgroundColorLight: #f9f9f9;  
  --PageBackgroundColorLight: #efefef;
  --PrimaryColorLight: #34495e;
  --PrimaryActivedColorLight: #1890FF;
  // Dark Theme
  --PrimaryBackgroundColorDark: #293042;
  --PageBackgroundColorDark: #202634;
  --PrimaryColorDark: #c6cfd8;
  --PrimaryActivedColorDark: #1890FF;
}

我們定義好全局 CSS 變量后，在需要的地方直接引用即可：

.day.light {
  background-color: var(--PrimaryBackgroundColorLight);
}

檢測(cè)主題色

既然能通過(guò) CSS 設(shè)置系統(tǒng)主題色，那 JS 肯定也有能力來(lái)檢測(cè)系統(tǒng)主題色。JS 提供了一個(gè)用于檢查媒體查詢的函數(shù) matchMedia，利用該函數(shù)能方便地檢查當(dāng)前系統(tǒng)主題色：

const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
if (themeMedia.matches) {
  // 日間模式
} else {
  // 夜間模式
}

監(jiān)聽(tīng)主題色變化

除了獲取當(dāng)前系統(tǒng)主題色，我們還能監(jiān)聽(tīng)主題色的變化。

const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
themeMedia.addListener(e => {
  if (e.matches) {
    console.log("light");
  } else {
    console.log("dark");
  }
});

通過(guò)上面提到的三個(gè)知識(shí)點(diǎn)，在自己站點(diǎn)實(shí)現(xiàn)主題色功能是綽綽有余的。像一些更豐富的多主題切換，雖然實(shí)現(xiàn)的方法不同，但思路基本都是類似的?？偨Y(jié)起來(lái)就是開篇的三句話：如何設(shè)置主題、獲取當(dāng)前被應(yīng)用的主題以及監(jiān)聽(tīng)主題的變更。

以上就是prefers-color-scheme設(shè)置檢測(cè)系統(tǒng)主題色的詳細(xì)內(nèi)容，更多關(guān)于prefers-color-scheme主題色的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論