扫盲， 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