We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to Change Image/Icon Color in the TabBar Based on App Theme?

I am using icons throughout my app and change their color based on the App Theme using IconTintColorBehavior from the Maui Community Toolkit. I want to add icons to the tab bar in my SFTabView and change their color in a similar way. Is there a way to do this without creating icon image files of different colors?

Example of how I change icon colors throughout my app currently...

<Image Source="gliding_skier.png" VerticalOptions="Center" HeightRequest="25">


                <mct:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Primary},Dark={StaticResource White}}"/>



Ideally, I'd like to be able to use standard Maui Layouts in the tab bar.

Thank you.

1 Reply 1 reply marked as answer

SR Shivani Ramakrishnan Syncfusion Team February 6, 2023 01:07 PM UTC

Hi Craig,


Query: Change Image/Icon Color in the TabBar Based on App Theme


Based on your requirements, we have prepared the sample using HeaderItemTemplate to set the Image behaviour using MAUI Community Toolkit. Here is the code snippet:


<tabView:SfTabView x:Name="tabView" TabBarHeight="80" ItemsSource="{Binding Models}">
                    <StackLayout Orientation="Horizontal" Padding="10">
                        <Label Text="{Binding Title}" VerticalOptions="Center" Padding="5"/>
                        <Image Source="skiing_2.png" HeightRequest="25" VerticalOptions="Center">
                                <mct:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Primary},Dark={StaticResource White}}"/>


We have attached the sample for further reference,  please let us know if you need any other details.



Attachment: MauiApp1_3bb8f920.zip

Marked as answer
Live Chat Icon For mobile
Up arrow icon