.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)的方法不同，但思路基本都是類似的?？偨Y(jié)起來就是開篇的三句話：如何設(shè)置主題、獲取當(dāng)前被應(yīng)用的主題以及監(jiān)聽主題的變更。

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

您可能感興趣的文章: