HarmonyOS鸿蒙Next中svg图标怎么自适应深色模式？

HarmonyOS鸿蒙Next中svg图标怎么自适应深色模式？ 我定义了一些按钮，其中按钮中的图标是纯黑色的svg资源，svg的背景是透明的，但是现在我想设置深色模式，怎么实现更换svg资源的颜色呢？

7 回复

src/main/ets/pages/Page17.ets

@Entry @Component struct Page17 { @State color: string = “#ff0000” build() { Column() { Image($r(‘app.media.ic_search_google’)) .width(124) .height(124) .fillColor(this.color) .borderWidth(1) .objectFit(ImageFit.Contain) Button(‘蓝色’).onClick(() => { this.color = “#0000ff” }) Button(‘红色’).onClick(() => { this.color = “#ff0000” }) } .height(‘100%’) .width(‘100%’) } }

更多关于HarmonyOS鸿蒙Next中svg图标怎么自适应深色模式？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不同模式不同svg

好的，那请问有什么方案可以实现一个可供上色的图标资源吗？首先用Image组件加载这个图标，然后设置它的颜色？或者用Image外其他的组件可以实现吗？

方案一：对于简单图标（back箭头），可以使用canvas画图，画出来，然后动态配置你想要的图片颜色
方案二：两个图片，切换模式后，看看触发那个事件，在事件中对image的变量就行变化
通过image组件不能进行变更资源颜色
自己绘制图标文档
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/Readme-CN.md#/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md

谢谢，您的方法更通用，楼上也有人提供了一种方法，我试了一下可以成功修改Image组件中svg图标的颜色。

在HarmonyOS鸿蒙Next中，SVG图标可以通过系统提供的深色模式自适应机制来实现。具体步骤如下：

  1. 使用系统资源：在resources目录下创建dark和light子目录，分别存放深色和浅色模式的SVG图标文件。系统会根据当前模式自动加载对应的资源。

  2. XML配置：在XML布局文件中，使用ohos:background_element或ohos:src_element属性引用SVG图标。系统会根据模式切换自动选择对应的图标。

  3. 动态切换：在代码中，可以通过ResourceManager的getElement方法获取当前模式下的SVG资源，并动态设置给相应的视图。

  4. 主题定义：在theme.json中定义深色和浅色主题，通过"icon": "$graphic:your_svg_icon"引用SVG图标，系统会根据主题自动切换。

通过这些方法，SVG图标可以在HarmonyOS鸿蒙Next中实现深色模式的自适应。

在HarmonyOS鸿蒙Next中，可以通过以下步骤使SVG图标自适应深色模式：

  1. 使用系统主题变量：在SVG文件中引用系统提供的主题变量，例如@color:foreground，这些变量会根据系统主题自动切换颜色。

  2. 定义颜色资源：在resources文件夹中定义颜色资源，使用dark和light子文件夹分别存放深色和浅色模式下的颜色值。SVG文件引用这些资源，系统会根据当前主题自动选择合适的颜色。

  3. 动态切换：在代码中监听主题变化，通过ResourceManager动态加载对应主题的SVG资源。

通过以上方法，SVG图标可以自动适应深色和浅色模式。

回到顶部