相关问题
应用如何适配深色模式?
2284浏览 • 1回复 待解决
app适配深色浅色切换模式
1875浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何适配深色与浅色模式?
102浏览 • 1回复 待解决
应用如何适配大显示模式
1957浏览 • 1回复 待解决
关于切换深色模式应用自动重启应用
6432浏览 • 2回复 待解决
HarmonyOS深色主题适配
381浏览 • 1回复 待解决
android 应用深色模式在鸿蒙os上有异常
9308浏览 • 1回复 待解决
HarmonyOS 应用不随系统深色模式变化改变颜色
219浏览 • 1回复 待解决
HarmonyOS Web组件如何适配深色模式,利用CSS媒体特性prefers-color-scheme进行交互告知?
294浏览 • 1回复 待解决
深色模式如何屏蔽?有人知道吗?
309浏览 • 0回复 待解决
如何获取当前手机是深色模式还是浅色模式?
625浏览 • 1回复 待解决
如何设置Web组件的深色模式?
298浏览 • 1回复 待解决
HarmonyOS app内如何禁用深色模式?
246浏览 • 1回复 待解决
HarmonyOS 如何监听系统的深色模式还是浅色模式?
205浏览 • 1回复 待解决
如何强制开启Web组件的深色模式?
775浏览 • 1回复 待解决
有关深色模式开发的文档
1677浏览 • 1回复 待解决
跟随系统,系统深色模式下getColorSync(resource)返回了浅色模式下的颜色值而不是深色的
425浏览 • 1回复 待解决
深色模式怎么开发? 有没有相关api?
4221浏览 • 1回复 待解决
如何将页面设置为深色模式
2214浏览 • 1回复 待解决
HarmonyOS 组件切换深色模式不生效
373浏览 • 1回复 待解决
HarmonyOS 如何获取系统当前的深色模式开启状态
345浏览 • 1回复 待解决
Web组件开启了强制深色模式会怎样?
375浏览 • 1回复 待解决
期望系统api提供深色模式控制api
1623浏览 • 1回复 待解决
鸿蒙怎么获取当前是不是深色模式
8451浏览 • 1回复 待解决
应用适配深色模式绝大部分场景需要利用资源
限定词目录机制,少部分特殊场景需要利用
AbilityStage.onConfigurationUpdate接口。
根据应用的不同场景可能涉及对颜色资源、图片资源以及布局资源的排查适配,如常见组件的 backgroundColor、fontColor、fillColor等属性设置的值。
颜色资源
如果应用给UI组件指定的颜色属性是固定的颜色值,那么深浅模式都将是一个颜色。
例如:
如果上述Row组件背景需要在深色模式下有不同的颜色值,需要改成引用颜色ID的方式。
在应用的 resources/base/element/color.json 文件中新增一个颜色ID。
然后将组件属性改为使用 $r 的方式。
创建深色模式限定词目录
在 resources 目录下新增 dark/element 目录,并创建 color.json 文件。
color.json 中填写深色模式下有差异的颜色ID并指定具体的色值。例如我们将 row_bg_color 在深色模式下指定为 白色。
如果应用给UI组件指定的颜色属性是系统中的颜色ID(即分层参数中的ID),那么不需要像自定义颜色资源那样定义2份,深浅模式下会自动切换成对应的颜色值。
例如:
图片资源
针对 Image 组件渲染的图片不同格式,深色模式适配方式略有不同。
由于当前 Image 组件还不支持 fillColor 对 Png / Webp 图片的着色,当前如果深色模式的图片颜色需要和浅色模式有区别,需要采用资源限定词目录的方式。
将深色模式下对应的同名 png / webp 图片放到 dark/media 目录下,Image 组件使用的使用引用同一资源ID即可。
当前 Image 组件支持 fillColor 对 SVG 图片的着色,仅限简单的单色线稿图标,如下面这种SVG图标:
上述代码可以只用一份SVG资源达到同时适配深浅模式的效果。
浅色:
深色:
颜色复杂的图标可以暂时采用类似 png/webp 图片的深色模式适配方案。
布局资源/逻辑
如果应用在深浅模式下,UI布局或者逻辑存在差异,也可以采用
AbilityStage.onConfigurationUpdate监听的方式。
具体方案如下:
1)在 AbilityStage 的 onCreate() 生命周期中获取APP当前的颜色模式并保存到 AppStorage。
2)在 AbilityStage 的 onConfigurationUpdate() 生命周期中获取最新变更的颜色模式并刷新到 AppStorage。
3)在 UI Page中通过 @StorageProp + @Watch 方式获取当前最新颜色并监听设备深色模式变化。
4) 在 aboutToAppear 初始化函数中根据当前最新颜色模式刷新状态变量。
5)在 @Watch 回调函数中执行同样的适配逻辑。
在上述回调中,我们在初始化和监听到深色模式变化后都对两个UI状态变量进行控制,从而刷新对应的UI效果。例子对应的UI布局代码如下,切换深色模式后,文字颜色和内容将会变化。实际开发过程中,应用可根据自己的场景进行扩展,执行自己的自定义适配逻辑。
Web网页深色适配
需要将 forceDarkAccess 设置为 true, 然后会自动根据 darkMode 的值启用媒体查询prefers-color-scheme中网页所定义的深色样式。
不要设置 forceDarkAccess 属性,同时需要将 darkMode 设置为 Auto。
网页需要自行监听深色模式变化(可以通过和APP交互实现),然后应用对应的网页变化。
状态栏深色适配
应用可以根据自己业务场景设置状态栏的背景色、文字颜色使其和应用界面保持协调一致,调用的接口为setWindowSystemBarProperties()
可以选择在 onConfigurationUpdate() 回调中检
测 colorMode 是否发生变化,并根据当前的colorMode 刷新状态栏的背景和文字颜色。
本文涉及的相关文档链接:
1. 限定词目录
2. 系统分层参数