H5暗黑模式在京东收银台中的实践
暗黑主题下，用户可以选择采用深色的系统范围外观而不是浅色外观。在暗黑模式下，系统对所有窗口，视图，菜单和控件采用较暗的调色板。谷歌的 Gmail 和 Chrome 浏览器、聊天工具 slack、telegram、Edge 浏览器和 Office 移动版 App 都陆续支持 darkmode 了。
可大幅减少耗电量（具体取决于设备的屏幕技术）。
为弱视以及对强光敏感的用户提高可视性。
让所有人都可以在光线较暗的环境中更轻松地使用设备。
macOS 10.14 引入了 darkmode
ios13 2019 年 3 月发布的 ios13 版本加入了 darkmode
Android 10 (API 级别 29) 及更高版本中提供深色主题背景
window10 2018.10.10
先看一下暗黑模式和非暗黑的模式对比图：
暗黑的需求其实可以分为两个部分：初始化和切换系统暗黑模式，两种情况都是前端和webview侧直接交互，初始化时前端调用方法主动获取当前的暗黑状态，切换系统暗黑模式时，webview调用前端的一个方法，当用户将收银台切到后台，更改系统的深色浅色模式（暗黑模式）再回到收银台的时候，页面也会随之变化，所以这就要求我们在页面不刷新的情况下实时的更改页面样式。
如何在页面不刷新的情况下实时更改页面样式？
其实无非就是更改 css，使用js进行css变换！！！用户切换系统深色浅色模式的时候客户端会调用我们的一个方法，这个方法当用户切换系统暗黑模式的时候就会调用，因此可能会被调用很多次，我们可以在这个方法里面进行操作，去动态更改css。
Eg:// 准备回调用的函数_iosCallBack:function() {window.getDarkInfo = function(jsonString) {// 根据jsonString ，do something ………};}// 初始化_initFinishDarkModel: function() {var params = {"routerURL":"router://JDWebViewBusinessModule/getJDAppearanceState","callBackName":"getDarkInfo",//h5自定义的函数名称，optional,可选参数"callBackId":"finish"//h5自定义的参数，用于区分同一个页面，optional,可选参数}if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.JDAppUnite && window.webkit.messageHandlers.JDAppUnite.postMessage) {window.webkit.messageHandlers.JDAppUnite.postMessage({'method': 'callSyncRouterModuleWithParams','params': JSON.stringify(params)});}},// ios用户切换系统暗黑模式，只有用户手动切换的时候会调用_changeSystemDarkSkin: function() {window.jdAppearanceDidChangedNotification = function(state) {if (state == 1) { // 系统暗黑模式// do something……..}else{ // 系统明亮模式// do something……..}};},
实际上无论初始化时还是动态切换系统暗黑模式我们都使用js动态添加css类的方式控制暗黑与否就可以完美的解决问题。当然我们完全可以将对暗黑的操作抽出一个darkModal（）的方法出来，这样只要是需要设置暗黑我们调用该方法就可以了。
通过媒体查询@media(prefers-color-scheme: dark)来适配
Eg:
prefers-color-scheme
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。
1、语法：
no-preference
表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。
light
表示用户已告知系统他们选择使用浅色主题的界面。
dark
表示用户已告知系统他们选择使用暗色主题的界面。
Eg:.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; }}.day, .night {display: inline-block;padding: 1em;width: 7em;height: 2em;vertical-align: middle;}
2、兼容性（can I use）
注意：prefers-color-scheme 在 W3C 规范上处于 level5 的草案，在生产环境还需要针对不同浏览器做一些向下兼容处理。
3、浏览器支持检测
Window.matchMedia()：Window 的matchMedia() 方法返回一个新的MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。返回的MediaQueryList 可被用于判定Document是否匹配媒体查询，或者监控一个document 来判定它匹配了或者停止匹配了此媒体查询, 该方法接受一个被用于媒体查询解析的字符串作为参数。
Eg:if (window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches) {// dark mode do something}
注意：可以在can I use上检测一下该方法的兼容性
4、扩展
更多的媒体查询适配！
根据Specification [drafts.csswg.org]W3C 草案中的说明，通过媒体查询和 js matchMedia Api 不仅可以用来适配 darkmode。还可以通过下面的 key 来适配更多的场景：
inverted-colors：反转色
prefers-reduced-motion：减少动画
prefers-reduced-transparency：透明度
prefers-contrast：对比度
forced-colors：指定颜色
这些属性都可以通过媒体查询来做一定的兼容。
无论哪种方式，殊途同归，都是要对css“手术”， 并且尤其要关注到iphoneX安全区域的问题，暗黑设置样式的时候要对body进行处理，否则底部会有空白的区域。实际开发中的场景会更复杂，会有更多的业务逻辑耦合进来，收银台H5在实现暗黑模式使用的方案一，也就是js动态控制css类，没有任何兼容性问题，方案二的话存在兼容性问题，后面还是有很大的发展空间的，或者可以尝试将两者结合，或许也是一个不错的方案。