掃盲， H5適配暗黑主題（DarkMode）所有解法

前景

暗黑主題下，用戶能夠選擇採用深色的系統範圍外觀而不是淺色外觀。在暗黑模式下，系統對全部窗口，視圖，菜單和控件採用較暗的調色板。

谷歌的 Gmail 和 Chrome 瀏覽器、聊天工具 slack、telegram、Edge 瀏覽器和 Office 移動版 App 都陸續支持 darkmode 了。Youtube 今年全面引入了網頁版、手機和平板統一設計的新界面。

隨着系統級別的支持，其餘主流應用程序的適配也陸續展開。

優點

• 可大幅減小耗電量（具體取決於設備的屏幕技術）。
• 爲弱視以及對強光敏感的用戶提升可視性。
• 讓全部人均可以在光線較暗的環境中更輕鬆地使用設備。

系統兼容狀況

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

可見系統適配狀況很是可觀。

h5 如何適配

css 適配

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

Demo：

body {
  background: #f2f2f2;
  color: #333;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #222;
    color: #eee;
  }
}
複製代碼

文檔：

MDN prefers-color-scheme

兼容狀況：

caniuse 上顯示的瀏覽器兼容狀況仍是很是可觀的。做爲前端開發者，順應潮流是必然的。

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

Javascript 適配

Demo：

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

文檔：

Window.matchMedia() - Web APIs | MDN

兼容狀況：

注意：若是是 native 上的 webview 容器只須要支持 darkmode 的 runtime 就能夠，就不用考慮兼容處理了。

擴展

更多的媒體查詢適配！

根據Specification [drafts.csswg.org]W3C 草案中的說明，經過媒體查詢和 js matchMedia Api 不只能夠用來適配 darkmode。還能夠經過下面的 key 來適配更多的場景：

• inverted-colors：反轉色
• prefers-reduced-motion：減小動畫
• prefers-reduced-transparency：透明度
• prefers-contrast：對比度
• forced-colors：指定顏色

這些屬性均可以經過媒體查詢來作必定的兼容，感興趣能夠在 W3C 上深刻了解。

參考

• Dark Mode - Visual Design - macOS - Human Interface Guidelines - Apple Developer
• 深色主題背景 | Android Developers