Is it possible to change color of toolbaritem more icon, hamburger icon and backbutton in .Net Maui?

Question

I have a flyout master/detail page with .net maui.

In dark mode, hamburger button, back button and toolbaritems more icon (three dots) appear in black on windwos. On Android, only the toolbaritems more icon (three dots) is black, the back button is white.

How can I change my toolbaritem more icon color, humberger icon color and backbutton color in .net maui on windows, android, ios?

Thanks in advance.

Windows:

Android:

Windows on light mode: here how can i make more icon white?

My Style `

<Color x:Key="Background_Dark">#081B25</Color>
<Color x:Key="DarkGreenBackgroundColor">#187D21</Color>
<Style TargetType="NavigationPage" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource DarkGreenBackgroundColor}, Dark={StaticResource Background_Dark}}" />
    <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource DarkGreenBackgroundColor}, Dark={StaticResource Background_Dark}}" />
    <Setter Property="BarTextColor" Value="White" />
    <Setter Property="IconColor" Value="White" />
</Style>

<Style TargetType="Page" ApplyToDerivedTypes="True">
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=White, Dark={StaticResource Background_Dark}}" />
</Style>

`

Bixby

You should replace icon and choose white color. I tested the code, but failed to achieve it. In addition, you can refer to official doc about Change icon and Theme Change. Considering different platform, you can check this link, it's about android. – Tetralogy

Thank you for answer. Please download the sample from the link below and make the theme dark. Application.Current.UserAppTheme = AppTheme.Dark; Test it on Windows and Android. github.com/iolah2/maui-samples_2022/tree/main/6.0/Navigation/… – Bixby

Answer 1

I submitted a pull request to MAUI that should fix this issue and make the overflow icon color match the other navigation icons. You can take a look at my write up here.

Until a fix is merged, you can create a custom shell renderer. This shell renderer will the overflow icon's color to Shell.ForegroundColor but you could use another style color if you choose.

Create a file CustomRenderers.cs in YourApp/Platforms/Android/:

using Microsoft.Maui.Controls.Compatibility.Platform.Android;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using Toolbar = AndroidX.AppCompat.Widget.Toolbar;

namespace YourApp.Platforms.Android;

public class CustomShellRenderer : ShellRenderer {
    protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker() {
        return new CustomToolbarAppearanceTracker();
    }
}

internal class CustomToolbarAppearanceTracker : IShellToolbarAppearanceTracker {
    public void Dispose() {
    }

    public void SetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance) {
        toolbar.OverflowIcon?.SetTint(appearance.ForegroundColor.ToAndroid());
    }

    public void ResetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker) {
    }
}

Then, in your MauiProgram.cs:

        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts => {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            }).ConfigureMauiHandlers(handlers => {
// ADD THIS SECTION
#if ANDROID
                handlers.AddHandler(typeof(Shell), typeof(YourApp.Platforms.Android.CustomShellRenderer));
#endif
            });

Etruria

I tried this approach and it worked. thanks – Macron

Answer 2

To do it without a custom renderer,

The toolbar item color is decided by the Shell.Foreground color. You can set it on the ContentPage

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyPage"
             Shell.ForegroundColor="Red">

If you want to set the color for each content page, set it in the Resources/styles.xml

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Style TargetType="ContentPage"
           ApplyToDerivedTypes="True">
        <!--Change the toolbar button colors-->
        <Setter Property="Shell.ForegroundColor" Value="Black" />
    </Style>
</ResourceDictionary>

Sunlit

Answer 3

I tested the sample you provided and followed the step you said. However, it fails to change icon color.

Method 1

As I said before, you can replace icon and choose white icon color. If you can use PS to modify icon color well, it will be fast.

Method 2

You can refer to this case, it changes icon color by plugin. So, it's relatively complicated. It could be helpful to you.

Tetralogy

Using a white icon seems like the best solution for now. I will go through your example and how the back button and more icons can be changed on all platforms. Thank you so much. – Bixby

The transparent background suggested in the example you gave can also be an option. I will try transparent background. Thanks. – Bixby

@SArslan Have you solved the problem? – Tetralogy

Answer 4

if you go to <Project Sdk="Microsoft.NET.Sdk"> scroll to the image part and add the value TintColor

<MauiImage Update="Resources\Images\dotnet_bot.svg"  TintColor="#512BD4" BaseSize="168,208" />

Upbuild

Answer 5

It seems at the moment you need to create a renderer for the shell.

This answer on the Microsoft forum worked for me on Android

https://learn.microsoft.com/en-us/answers/questions/1020737/changing-color-of-3-dots-in-toolbar-net-maui

Mixedup

Answer 6

Try setting the tint to that icon

toolbar.OverflowIcon.SetTint(ContextCompat.GetColor(Microsoft.Maui.ApplicationModel.Platform.CurrentActivity,Resource.Color.m3_ref_palette_white));

Wildfire