How to change icon color in ContentPage title bar or in another view within a ContentPage in a Maui-CodePudding

I am adding a simple icon text at the top of each ContentPage of my Maui app. I want the color of the icon to change according to the current AppTheme (dark or light). I use these same icons in the navigation tabs in this shell app. The color of these icons change when the a tab is selected or unselected and these colors vary depending on the AppTheme. This happens automatically without me needing to code the behavior. I have not been able to find a way to mimic this behavior for the icon at the top of the page. I'm trying to avoid creating multiple icon image files of different colors.

I am using a toolbox icon for one of my navigation tabs. When the AppTheme is Light and the icon is unselected, the icon is black , when selected it is blue . When the AppTheme is Dark, the icon is always White. This is being handled automatically for me in the shell app.

How can I create this same behavior for this icon color if I use it in a title bar (e.g. setting Shell.TitleView) or in another type of view without creating black, blue and white toolbox image files?

CodePudding user response：

I recommend using icons in font format (.ttf, etc.) so you avoid having to create images with different colors, to manipulate the color is the same as how you do it with text, this also includes size. Here's an example: https://youtu.be/rYdJP2t7foU

CodePudding user response：

The community toolkit IconTintColorBehavior can change the color of an image (tint it). You can use binding on the color to change it accordingly to the theme (like in this question).

So you will have something like this :

<Shell.TitleView>
    <Image Source="logo.png">
        <Image.Behaviors>
            <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={DynamicResource Gray950}, Dark={DynamicResource White}}" />
        </Image.Behaviors>
    </Image>
</Shell.TitleView>