HarmonyOS 图片和文字如何适配暗色模式?

图片和文字如何适配暗色模式?普通模式和暗色模式分别使用不同的图片和字体颜色,请问如何适配?

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

1、app跟随系统切深色模式或者非深色模式

1.1 颜色适配,自定义两套颜色资源(resources/dark/element/color.json和resources/base/element/color.json),通过$r的方式加载颜色资源的key值。

通过系统资源实现,开发者可直接使用的系统预置资源,即分层参数,同一资源ID在设备类型、深浅色等不同配置下有不同的取值。

通过使用系统资源,不同的开发者可以开发出具有相同视觉风格的应用,不需要自定义2份颜色资源,在深浅色模式下也会自动切换成不同的颜色值。

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/resource-usage-V5

1.2 图片资源,采用资源限定词目录的方式。

参照颜色适配的方法,需要将深色模式下对应的同名图片放到 dark/media 目录下,再通过$r的方式加载图片资源的key值,系统做深浅色模式切换时,会自动加载对应资源文件中的value值。

对于 SVG 格式的一些简单图标,可以使用 fillColor 属性配合系统资源改变图片的绘制颜色。不通过两套图片资源的方式,也可以实现深浅色模式适配。

2、app不跟随系统,应用内切深色模式或非深色模式

2.1 应用通过系统接口主动设置深浅色模式,setColorMode:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-inner-application-applicationcontext-V5

2.2 监听深浅色切换事件,自行实现深浅色模式:

this.context.config.colorMode以及onConfigurationOnUpdate监听颜色模式。

分享
微博
QQ
微信
回复
3天前
相关问题
如何图片和文案结合,保存到相册
262浏览 • 0回复 待解决
应用如何适配深色模式
1111浏览 • 1回复 待解决
应用如何适配深色模式
2367浏览 • 1回复 待解决
HarmonyOS 分屏模式界面如何适配
46浏览 • 1回复 待解决
应用如何适配大显示模式
2004浏览 • 1回复 待解决
HarmonyOS分屏幕模式和小窗口模式适配
709浏览 • 1回复 待解决
HarmonyOS 图片+文字排列问题
80浏览 • 1回复 待解决
app适配深色浅色切换模式
1904浏览 • 1回复 待解决
鸿蒙应用开发如何图片适配
2278浏览 • 1回复 待解决
flutter适配HarmonyOS图片压缩的库
226浏览 • 1回复 待解决
HarmonyOS ide中富文本中图片适配
65浏览 • 1回复 待解决
HarmonyOS 怎么进行图标和图片适配
21浏览 • 1回复 待解决