【apicloud】关于兼容IOS深色模式、黑夜模式方法
他来了，他来了！
IOS要求新应用兼容深色/黑夜模式，又得加需求了。
对于这个兼容措施，目前的构思如下。
1：如何监听当前IOS处于的模式。
这个问题估计需要等apicloud出对应的监听接口，如果不需要与iphone同步我们是可以在APP内自己设立一个用户配置参数来控制是否黑夜模式。
2：如何切换样式。
两套CSS样式，通过body设置一个专属模式的class来区分，于apiready中设置监听判断当前的模式状态，若为夜间模式则为body增加上夜间模式专用class，则页面调取对应的CSS样式。
另外提供一个极简方法：
对需要实现夜间模式的页面直接加一个灰度值样式 filter: invert(100%);
参考http://www.iskeys.com/article/103
【APICloud官方的解决方案】
= 全局配置 =
目前应用默认关闭了深色模式，要支持深色模式需要先在config.xml中配置interfaceStyle字段值为Automatic，参考https://docs.apicloud.com/Dev-Guide/app-config-manual#14-16。
<preference name="interfaceStyle" value="Automatic"/>
= api支持 =
引擎和模块的部分UI类视图目前已经适配了深色模式，引擎的api对象下提供了getInterfaceStyle、setInterfaceStyle方法来获取和设置当前外观模式，同时提供了interfacestylechanged事件来监听变化，在页面中如果使用了引擎、模块带UI的视图，则可以在监听到变化后动态设置相关属性。
= 页面CSS处理 =
一种方法是将深色、浅色模式对应的页面样式放到单独的两个css文件中，通过js来动态设置link标签引入哪个样式文件，类似于切换主题功能；
另一种方法则是使用媒体查询来实现，为了在网页中适配深色模式，苹果推出了一个新的媒体查询规范 prefers-color-scheme，可以检测出深色、浅色模式，如：
@media (prefers-color-scheme: dark)
{
body {
background-color: #000;
color: #fff;
}
}然后可以配合使用自定义属性的方式来支持，如
:root {
--app-bg-color: #fff;
--app-text-color: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--app-bg-color: #000;
--app-text-color: #fff;
}
}
body{
background-color: var(--app-bg-color);
color: var(--app-text-color);
}本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com
- 最新评论
- 总共0条评论
