ImageButton does not render Image source for Current Theme Colors

[pierre01]

Description

ImageButtons always render the image with the default color (Black by default) Regardless of the Theme, but Tabs and Flyout header icons are adapting to the theme

Expected behavior: The .SVG image to .Png adapter should create icons of colors adapted to the current theme like tab and flyout header buttons

Steps to Reproduce

Create a new maui application Add some image buttons Switch between themes Dark/Light the Image does not adapt to the theme

Version with bug

6.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows

Affected platform versions

Android 11 API 30 - Windows 11 Pro 22000.348

Did you find any workaround?

Create separate images for Dark and Light Themes

Relevant log output

No response

[VincentBu]

repro with vs main build(32525.350.main)

[Kumima]

I believe your solution should be the only way (Create separate images for Dark and Light Theme). We can only determine the image source of the ImageButton, the image is created at the building time and convert .svg to .png. You must create separate image sources to distinguish. Just my guess. But if anybody can provide the way to generate different color .png from the same .svg source will help. For now, I have to rename the same .svg into different names, like wine_light, wine_dark, which is not so good.

[pierre01]

@Kumima I understand, but since they do the job for other .svg images automatically, like the Tab icons.

Rendered automatically in Light Theme:

and Dark Theme:

They should be able to do it for the button icons too... or at least have a way to not duplicate the full image and just change the fill property.

[mattleibow]

I wonder if the OS does special things for tabs, and not for buttons - so we just get lucky with those.

[mattleibow]

The image resizing system <MauiImage> does not generated themed images. The magic just happens to work on some controls on some platforms.

For true colors, new images will have to be generated. You can also use the TintColor attribute on <MauiImage> to do this as well:

<MauiImage Include="black_image.svg" TintColor="Red" />

This will generate the PNG, but with red in the places that are not transparent.

[pierre01]

The Tint Works Great with the MauiToolkit Thank you!!