- 发布：2021-01-08 10:16
- 更新：2024-11-18 15:28
- 阅读：3137
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.15.7
HBuilderX类型： 正式
HBuilderX版本号： 3.0.4
手机系统： 全部
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
操作步骤：
请看BUG描述
请看BUG描述
预期结果：
请看BUG描述
请看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 页面正常
如果以上问题都无法解决，就权当我自己记录问题，也方便其它需要适配深色模式的开发者查略吧，也欢迎大家共同发现问题提出问题。
7 个回复
DCloud_UNI_LXH
现在暗黑模式已经上线，可以使用 alpha 3.6.9 运行 暗黑模式示例项目 查看效果
pwiz
题主现在怎么解决的，我通过变量控制每个页面的样式，切换页面的时候（navigateTo）总是先白屏再黑会闪一下，体验很不好，但是安卓又不法支持prefers-color-scheme
雨夜敬清秋 (作者)
没法解决，因为切换页面时的这个问题是硬伤，需要uniapp支持动态修改窗口背景色才能解决，目前我只开放了ios端的深色模式，因为ios端在切换页面时没有安卓那么的明显，凑合用吧
2021-09-14 17:02
pwiz
回复 雨夜敬清秋: 硬伤啊，想一劳永逸用flutter了 T_T
2021-09-14 17:24
前端JASON - 接单uniapp项目&插件/联系front_jason/主页daxiong.site
把globalStyle中底色变掉，再重启一次生效
Kytrun
pages.json 内容能实时改吗，没看到相关的资料，烦请赐教
2022-01-05 20:53
小小菜76055421
大佬，安卓端怎么去切换
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
南黎2024
大佬们 现在能不能动态设置窗口背景颜色了~
所以官方是不打算管了吗·····
雨夜敬清秋 (作者)
别考古了，好像已经支持了，看文档https://uniapp.dcloud.net.cn/tutorial/darkmode.html
2024-05-17 10:39
南黎2024
回复 雨夜敬清秋: 不是 支持是支持
问题是我想要自己动态设置窗口背景颜色
假设系统颜色是light，但是用户选择了dark
用了文档的东西会导致窗口背景颜色还是light的，就会有页面的闪烁闪白，官方uniapp至今没有动态设置窗口背景颜色在app端的
2024-05-17 13:21
南黎2024
回复 雨夜敬清秋: 同样的 他这个也会导致我的顶部状态栏颜色异常············永远是系统的颜色，我手动设置了用户的颜色换一个页面也会被这个darkmode框架覆盖
我想找个不用他这个框架的方法了········
2024-05-17 13:22
i***@126.com
您好，夜间模式会造成nvue页面视频播放器在横屏全屏的时候重新触发onload，重新加载了, 怎么解决， 小米手机安卓14和模拟器这样的，其他设备还没测试， 我遇到这个问题一直没解决