How To Change Status Bar Color In .NET MAUI

Using the .NET MAUI community toolkit you can change the status bar color in your .NET MAUI app.

In this blog, you will see how to change your StatusBarColor with .NET MAUI Community Toolkit.

If you need to change the status bar color in your .NET MAUI mobile app, here is how you can do it.

Just install the .NET MAUI community toolkit to your project.

Install-Package CommunityToolkit.Maui -Version 3.1.0

Add it to the MauiProgram.cs,

var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit()
.ConfigureFonts(fonts => {
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});

Then go to the page where you need to change the color and it changes for all pages. You can specify for each page too.

Create an xmlns namespace named mct and add the below code to your page.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SonicApp.Views.Flows.LoadingPage" Shell.NavBarIsVisible="False" xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui">
  <ContentPage.Behaviors>
    <mct:StatusBarBehavior StatusBarColor="RED" />
  </ContentPage.Behaviors>
  <VerticalStackLayout VerticalOptions="CenterAndExpand">
    <ActivityIndicator Color="{StaticResource Primary}" IsRunning="True" HeightRequest="50" WidthRequest="50" IsVisible="True" />
    <Label Text="Checking Authentication..." HorizontalOptions="Center" />
  </VerticalStackLayout>
</ContentPage>

In the ContentPage.Behaviours tag you can specify the StatusBarBehaviour and change the StatusBarColor accordingly.

Here you can see the results for Android.

     

Thanks for reading.