H5 適配暗黑主題

在暗黑主題下，用戶可以采用深色的外觀，所有的窗口，背景都采用比暗的顏色。

隨着系統的升級，越來越多的APP適配了暗黑模式，比如微信，qq瀏覽器等。現在網頁也得跟上時代的潮流，也得適配暗黑模式。

暗黑模式的優勢

• 可以減少使用電量；
• 對弱勢或者光線敏感的人提供更好的視覺；
• 讓所有人都能在光線較弱的環境下使用。

系統兼容情況

• macOS 10.14 引入了 darkmode
• ios13 2019 年 3 月發布的 ios13 版本加入了 darkmode
• Android 10 (API 級別 29) 及更高版本中提供深色主題背景
• window10 2018.10.10

H5 如何適配

一、CSS適配

　　通過媒體查詢@media(prefers-color-scheme: dark)來適配

body {
  background: #fff;
  color: #333;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #000;
    color: #eee;
  }
}

更多用法參考MDN文檔

兼容性

caniuse 上顯示的瀏覽器兼容情況還是非常可觀的。作為前端開發者，順應潮流是必然的。

注意：prefers-color-scheme 在 W3C 規范上處於 level5 的草案，在生產環境還需要針對不同瀏覽器做一些向下兼容處理。

二、 JS適配

if (window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches) {
  // dark mode do something
}

更多的用法可以參考MDN文檔

兼容性

 

一般情況下會采用第二種方法，兼容性更好。移動端基本上沒問題。