prefers-color-scheme怎么設置檢測系統主題色

這篇“prefers-color-scheme怎么設置檢測系統主題色”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“prefers-color-scheme怎么設置檢測系統主題色”文章吧。

設置主題色

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

這里有一個簡單的例子，可以很方便的通過 CSS 實現系統主題色：

.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; }
}

當系統主題為日間模式時，會應用上面的 light 主題樣式；當系統主題為夜間模式時，會應用上面的 dark 主題樣式。

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

: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 設置系統主題色，那 JS 肯定也有能力來檢測系統主題色。JS 提供了一個用于檢查媒體查詢的函數 matchMedia，利用該函數能方便地檢查當前系統主題色：

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

監聽主題色變化

除了獲取當前系統主題色，我們還能監聽主題色的變化。

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

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

以上就是關于“prefers-color-scheme怎么設置檢測系統主題色”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。