[SOLVED] In Blazor MAUI, how can we change the color of navigation area

In Blazor MAUI, how can we change the color of navigation area

In Blazor MAUI, how can we change the color of navigation area to Pink? I'm initially focused on Android.

  <Shell BackgroundColor="Pink">
    <TabBar  
      Shell.TabBarTitleColor="#072644"
      Shell.TabBarBackgroundColor="White"
      Shell.TabBarForegroundColor="Red"
      Shell.TabBarDisabledColor="Green"
      Shell.TabBarUnselectedColor="Gray">

Here is the Minimal Reproducible repository: https://github.com/johnmangam/NavBarColor

Solution

To change the color of the navigation area in Blazor MAUI, you need to override the OnCreate() under Platforms\Android\MainActivity.cs and then set Window.SetNavigationBarColor(Android.Graphics.Color.Pink); like below:

public class MainActivity : MauiAppCompatActivity 
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
      
        Window.SetNavigationBarColor(Android.Graphics.Color.Pink);
        base.OnCreate(savedInstanceState);
    }
}

Screenshot: