Net Maui how to change status bar and navigation bar colour

Question

how to change status bar and navigation bar colour, Android and Ios

In App 2 themed colours I want to change status bar colour and navigation bar colour

also I want to change the status bar colour and navigation bar colour when shell tabs are clicked or according to page

  public static class ThemeUtil
  {
      public static void ApplyDarkTheme(this ResourceDictionary resources) {
          if (resources != null) {
              var mergedDictionaries = resources.MergedDictionaries;
              var lightTheme = mergedDictionaries.OfType<LightTheme>().FirstOrDefault();
              if (lightTheme != null) {
                  mergedDictionaries.Remove(lightTheme);
              }

              mergedDictionaries.Add(new DarkTheme());
              AppSettings.Instance.IsDarkTheme = true;
          }
      }

      public static void ApplyLightTheme(this ResourceDictionary resources) {
          if (resources != null) {
              var mergedDictionaries = resources.MergedDictionaries;

              var darkTheme = mergedDictionaries.OfType<DarkTheme>().FirstOrDefault();
              if (darkTheme != null) {
                  mergedDictionaries.Remove(darkTheme);
              }

              mergedDictionaries.Add(new LightTheme());
              AppSettings.Instance.IsDarkTheme = false;
          }
      }
  }

Answer 1

Hello,

You can do it by Messenger - .NET Community Toolkit | Microsoft Learn and change color of status bar and navigation bar at the runtime by SetTabBarBackgroundColor, SetBackgroundColor

For example, you create a Messager in the background code.

// Create a message
public class ColorChangedMessage : ValueChangedMessage<Color>
{
    public ColorChangedMessage(Color color) : base(color)
    {
    }
}

When you have a button click event, after clicking the button, color of status bar and navigation bar will be changed at the runtime, you can send a message.

WeakReferenceMessenger.Default.Send<ColorChangedMessage>(new ColorChangedMessage(Color.FromRgb(255, 0, 0)));

Then open your appshell.xaml.cs, you could register this message and get the color from the button click event, you can refer to the following code.

 public AppShell()
    {
        InitializeComponent();
        // Register a message in some module
        WeakReferenceMessenger.Default.Register<ColorChangedMessage>(this, (r, m) =>
        {
            var color=m.Value as Color;
            SetTabBarBackgroundColor(this, color);
            SetBackgroundColor(this, color);
        });
        
    }

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I found the problem the version of CommunityToolkit.MVVM version 8.2.1 must be reported to communitytoolkit team however install CommunityToolkit.MVVM version 8.2.0 is working fine.

So I need to access android navigationbar color by maui side as above that is staticlly working fine.But I need when shell page changed the android navigationbar color must be dynamiclly changed as expected runtime ? ..Is any idea ?

MauiProgram.cs ( working as expected setnavigationbar color) I also need when the page changed how I can use on contentpage that change the color of navigationbarcolor ..( in click event or in constructor or in handler)


                .ConfigureLifecycleEvents(events =>
                 {
#if ANDROID
              
                events.AddAndroid(android => android.OnCreate((activity, bundle) => MakeStatusBarTranslucent(activity)));
      
                static void MakeStatusBarTranslucent(Android.App.Activity activity)
                {
             
                activity.Window.SetNavigationBarColor(Android.Graphics.Color.ParseColor("#000000"));

                }
#endif
                 });