IOS13苹果系统深色模式适配

作者:apicloud官方 更新时间:2020-04-04 11:55

最近大家很关注深色模式,原因是苹果发布了一条官方公告,原文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 {
        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);
}


如果想快速支持深色模式可以使用CSS滤镜反转颜色,但要注意图片也会被反转,使用时尽量应用到具体的元素上,避免全局设置。

@media (prefers-color-scheme: dark) {
    html {
        filter: invert(100%);
    }
}