雨夜敬清秋
雨夜敬清秋
  • 发布:2021-01-08 10:16
  • 更新:2021-01-08 10:16
  • 阅读:308

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

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 3.0.4

手机系统: 全部

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: 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 负责人:无 分享
已邀请:

要回复问题请先登录注册