请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
12345下一页
返回列表 发新帖
显示全部楼层
28
帖子
1
勋章
1万+
Y币

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

[复制链接]
发表于 2020-3-11 14:19:41
本帖最后由 技术咨询-Kenny 于 2020-3-13 11:08 编辑

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






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

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

我试了一下全部反转,再重新单独把图片反转回来,可行。
.flip-horizontal {
        filter: invert(100%);
}
.flip-horizontal img{
        filter: invert(100%);
}
27
帖子
0
勋章
548
Y币
      
26
帖子
0
勋章
4903
Y币
hhhhhhh
10
帖子
0
勋章
64
Y币
沙发!!!!
132
帖子
7
勋章
1168
Y币
666666
12
帖子
3
勋章
5492
Y币
66666
46
帖子
0
勋章
75
Y币
这个是官方给的最终方案吗
9
帖子
0
勋章
738
Y币
我有很多css文件都用了!important 麻烦了
46
帖子
0
勋章
75
Y币
demo测试1 发表于 2020-3-11 15:44
我有很多css文件都用了!important 麻烦了

这大哥,你真完了
171
帖子
3
勋章
2612
Y币
我APP全都是黑色风格,类型抖音风格,这样需要开启深色模式吗
12345下一页
您需要登录后才可以回帖 登录

本版积分规则