快捷導(dǎo)航

prefers-color-scheme設(shè)置檢測系統(tǒng)主題色

更新時間：2023年04月28日 15:01:56 作者：碼上花甲

這篇文章主要為大家介紹了prefers-color-scheme設(shè)置檢測系統(tǒng)主題色實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

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

本文涉及三個相關(guān)知識點：

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

設(shè)置主題色

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

這里有一個簡單的例子，可以很方便的通過 CSS 實現(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)主題為日間模式時，會應(yīng)用上面的 light 主題樣式；當(dāng)系統(tǒng)主題為夜間模式時，會應(yīng)用上面的 dark 主題樣式。

實際開發(fā)中，我們會將項目用到的色值抽離出來作為全局的公共變量，方便我們對項目整體的色值管理。如：

: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);
}

檢測主題色

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

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

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

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

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

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

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

您可能感興趣的文章: