[ App引擎 ] 关于苹果iOS13深色模式

_本帖最后由 APICloud技术咨询-Kenny 提供

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

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%);
    }
}