最近大家很关注深色模式,原因是苹果发布了一条官方公告,原文https://developer.apple.com/news/?id=03042020b,一些媒体在此时也发布了“微信不适配深色模式将被苹果下架”的消息,进而引起广泛关注。实际上苹果目前并未强制要求应用必须支持深色模式,只是要求从2020年4月30日开始,所有提交的应用必须基于iOS13 SDK编译(云编译服务器早在去年iOS13刚发布后就已经支持)。
如果您的应用暂时不想支持深色模式,则可以不用做什么修改;如果想支持深色模式,那么首先应该从产品层面设计一下深色模式的效果,开发则可以参考以下方法:
全局配置
目前应用默认关闭了深色模式,要支持深色模式需要先在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的视图,则可以在监听到变化后动态设置相关属性。
注:使用TabLayout时,对于导航栏、tabBar的背景和文字颜色,如果没有主动设置颜色值,则TabLayout将自动适配深色模式;若设置了,则需要自行在监听外观模式变化后处理。
页面CSS处理
一种方法是将深色、浅色模式对应的页面样式放到单独的两个css文件中,通过js来动态设置link标签引入哪个样式文件,类似于切换主题功能;
另一种方法则是使用媒体查询来实现,为了在网页中适配深色模式,苹果推出了一个新的媒体查询规范 prefers-color-scheme,可以检测出深色、浅色模式,如:
@media (prefers-color-scheme: dark)
{
body {
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{
color: var(--app-text-color);
}
如果想快速支持深色模式可以使用CSS滤镜反转颜色,但要注意图片也会被反转,使用时尽量应用到具体的元素上,避免全局设置。
@media (prefers-color-scheme: dark) {
html {
filter: invert(100%);
}
}