4

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:

enter image description here

Android:

enter image description here

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

enter image description here

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>

`

S Arslan
  • 51
  • 1
  • 6
  • 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](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/images/app-icons?view=net-maui-7.0&tabs=android) and [Theme Change](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/system-theme-changes?view=net-maui-7.0). Considering different platform, you can check this [link](https://stackoverflow.com/questions/27995461/appcompat-toolbar-change-overflow-icon-color-in-actionmode), it's about android. – Jianwei Sun - MSFT Nov 17 '22 at 03:10
  • 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. https://github.com/iolah2/maui-samples_2022/tree/main/6.0/Navigation/FlyoutPageSample – S Arslan Nov 17 '22 at 08:37

5 Answers5

1

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.

Jianwei Sun - MSFT
  • 2,289
  • 1
  • 3
  • 7
  • 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. – S Arslan Nov 19 '22 at 09:59
  • The transparent background suggested in the example you gave can also be an option. I will try transparent background. Thanks. – S Arslan Nov 21 '22 at 09:28
  • @SArslan Have you solved the problem? – Jianwei Sun - MSFT Nov 23 '22 at 06:40
0

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" />
camif
  • 1
  • 1
0

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

Shaboboo
  • 1,347
  • 1
  • 16
  • 35
0

Try setting the tint to that icon

toolbar.OverflowIcon.SetTint(ContextCompat.GetColor(Microsoft.Maui.ApplicationModel.Platform.CurrentActivity,Resource.Color.m3_ref_palette_white));
Ravi Goshai
  • 1
  • 2
0

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
            });
widavies
  • 774
  • 2
  • 9
  • 22