内容简介:背景暗黑主题下,用户可以选择采用深色的系统范围外观而不是浅色外观。在暗黑模式下,系统对所有窗口,视图,菜单和控件采用较暗的调色板。谷歌的 Gmail 和 Chrome 浏览器、聊天工具 slack、telegram、Edge 浏览器和 Office 移动版 App 都陆续支持 darkmode 了。
背景
暗黑主题下,用户可以选择采用深色的系统范围外观而不是浅色外观。在暗黑模式下,系统对所有窗口,视图,菜单和控件采用较暗的调色板。谷歌的 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
h5 适配暗黑模式
先看一下暗黑模式和非暗黑的模式对比图:
那么如何来实现暗黑呢?
01
使用js动态控制css类
暗黑的需求其实可以分为两个部分: 初始化和切换系统暗黑模式,两种情况都是前端和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()的方法出来,这样只要是需要设置暗黑我们调用该方法就可以了。
02
媒体查询
通过媒体查询@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类,没有任何兼容性问题,方案二的话存在兼容性问题,后面还是有很大的发展空间的,或者可以尝试将两者结合,或许也是一个不错的方案。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- H5 暗黑模式在京东收银台中的实践
- YunGouOS 全能支付接口 2.0.15 版本发布,收银台新增个人微信 H5 支付接入
- 产品复盘:自助收银机项目的得与失
- 自助收银导致货损增加,阿里安全如何用视频识别AI应对?
- Vue全家桶 之 KTV前台收银管理系统 (不想努力啦,回家收钱去)
- 做面包点心的图像识别,「凯景」从智能收银和上货系统赋能非标品零售门店
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
iOS Web应用开发
皮基 (Andrea Picchi) / 罗晴明 / 人民邮电出版社 / 2013-8-1 / CNY 79.00
本书介绍了如何使用Web标准技术来为iPhone和iPad制作Web应用。书中利用最前沿的Web和移动技术,演示了如何使用HTML5来完成繁重的基础工作,如何使用CSS3来制作外观,以及如何使用JavaScript来为移动网站或Web应用添加程序逻辑。 通过阅读本书,读者可以掌握面向移动的项目的开发流程。作者逐章递进,引导读者了解iOS设计与开发的各个步骤。读者可以学习到如下知识: 设......一起来看看 《iOS Web应用开发》 这本书的介绍吧!