雨夜敬清秋
雨夜敬清秋
  • 发布:2021-01-08 10:16
  • 更新:2022-11-17 14:51
  • 阅读:2484

【报Bug】关于适配暗黑模式/夜间模式/深色模式/暗黑主题(DarkMode)发现的一些问题汇总

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.15.7

HBuilderX类型: 正式

HBuilderX版本号: 3.0.4

手机系统: 全部

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

所有支持设置深色模式的手机

操作步骤:

请看BUG描述

预期结果:

请看BUG描述

实际结果:

请看BUG描述

bug描述:

手里已经有一个APP完成了暗黑模式/夜间模式/深色模式/暗黑主题(DarkMode)的适配,适配过程中发现有些许问题,归纳记录问题如下

都存在的问题如下:
1、窗口背景色通常也是需要跟着亮色和深色模式的切换而切换的,那么在已知 setBackgroundColor API 不支持 APP 端的情况下,转而尝试使用 page-meta 组件来完成,发现设置 background-color 也不起作用(只有onLoad进去才会有用,如果从某个页面back回来就不行了,无法根据computed响应),而且还会导致使用了 page-meta 组件的页面主体内容整体缩小(该问题没有深入研究),虽然文档所说 page-meta 可以部分替代 page.json,但是每个页面都写一个page-meta组件还是显得不够优雅,并且文档也说了,渲染不及 page.json 的,所以还是牺牲了APP的一些重要的响应体验的
2、无法动态设置 tabbar 中 midButton 中的属性,这个部分在深色模式下也是需要跟随切换的
3、通过 setUIStyle 手动设置了主题模式后,当应用从后台关闭后再次打开,先前设置的模式失效了,这个问题通过本地存储已解决
4、switch 组件无法改变未选中状态下的 color 以适应深色模式的需求,始终只能是白色
5、picker 组件只支持了 time 模式下的深色模式UI,其它模式无法调整样式

安卓问题如下:
1、html5+plus文档中描述 setUIStyle 在安卓端不支持,实际上只是不支持 auto ,light和dark是支持设定的(UI也会跟着变),但是 getUIStyle 确实如文档所说,返回的始终是 light,这里我就有疑问了,既然 setUIStyle 支持设置 light 和 dark,那为什么 getUIStyle 却不支持返回 dark 呢?导致无法自动跟随系统
2、vue 页面所推荐使用的CSS媒体查询 prefers-color-scheme 不支持,于是通过其它方法解决了这个问题,使得所有页面都支持了深色模式的 css 跟随切换,但是有些公用的样式我会写在 app.vue 中,这个部分无法通过我先前的解决方案来处理,只能是每个页面都去重写一遍这些深色模式下的公共样式,很繁琐
3、NavigateTo 到 nvue 页面,会先显示 globalStyle 中设置的 backgroundColor 再渲染内容,深色模式和亮色模式都一样(大概持续1秒+,体验很差),但是到 vue 页面正常,具体效果在 https://ask.dcloud.net.cn/question/115028 帖子中有视频

苹果问题如下:
1、当我通过uni.setNavigationBarColor来调整颜色以便跟随深色模式时,会有明显的颜色切换过程,比如我在页面A中手动的方式把模式从亮色设置成了深色,此时我从A页面切换到B页面,B页面的NavigationBarColor的颜色切换肉眼可见的从白色切换成了黑色(大概0.5s),仿佛有个过渡动画效果一样,安卓没有这个问题,具体效果在 https://ask.dcloud.net.cn/question/114004 帖子中有视频
2、如果页面中存在很多图片,比如产品列表页这种,从某页面 NavigateTo 到该 nvue 页面时,会先显示 globalStyle 中设置的 backgroundColor 再渲染内容(没有安卓那么那么明显,但是也可以察觉到变化),深色模式和亮色模式都一样,但是到 vue 页面正常

如果以上问题都无法解决,就权当我自己记录问题,也方便其它需要适配深色模式的开发者查略吧,也欢迎大家共同发现问题提出问题。

2021-01-08 10:16 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

pwiz

pwiz

题主现在怎么解决的,我通过变量控制每个页面的样式,切换页面的时候(navigateTo)总是先白屏再黑会闪一下,体验很不好,但是安卓又不法支持prefers-color-scheme

  • 雨夜敬清秋 (作者)

    没法解决,因为切换页面时的这个问题是硬伤,需要uniapp支持动态修改窗口背景色才能解决,目前我只开放了ios端的深色模式,因为ios端在切换页面时没有安卓那么的明显,凑合用吧


    2021-09-14 17:02

  • pwiz

    回复 雨夜敬清秋: 硬伤啊,想一劳永逸用flutter了 T_T


    2021-09-14 17:24

前端JASON

前端JASON - 接单uniapp项目&插件/联系front_jason/主页daxiong.site

把globalStyle中底色变掉,再重启一次生效

  • Kytrun

    pages.json 内容能实时改吗,没看到相关的资料,烦请赐教


    2022-01-05 20:53

小小菜76055421

小小菜76055421

大佬,安卓端怎么去切换

Kytrun

Kytrun

目前已知的比较好的方式是封装一个切换页面的方法,里面先预加载一下过一小会儿再真正打开,参考
https://ext.dcloud.net.cn/plugin?id=6668

https://github.com/explaincloud/explain-mall-pro/blob/main/emui/common/util/common/navigate.js#L102

要回复问题请先登录注册