MAUI How to set the TopBar background color?

Question

How can I change / set the color of the top bar?

(for all pages at my app)

Answer 1

Shell

Since you're using Shell, this should be done using Shell.BackgroundColor:

<ContentPage
    x:Class="MauiSamples.Views.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Shell.BackgroundColor="DarkGreen">

    <!-- content goes here -->

</ContentPage>

You can also see how that works in my samples repository: https://github.com/ewerspej/maui-samples.

If you want to have the same style per page, then you can also change this in the Styles.xaml or define your own style somewhere in a similar fashion:

<Style TargetType="Shell" ApplyToDerivedTypes="True">
    <Setter Property="Shell.BackgroundColor" Value="DarkGreen" />
    
    <!-- skipping other styles -->

</Style>

Another way would be to set the TitleView to a Layout that fills the available space and give that a BackgroundColor:

<ContentPage
    x:Class="MauiSamples.Views.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Shell.TitleView>
        <Grid
            VerticalOptions="Fill"
            HorizontalOptions="Fill"
            BackgroundColor="DarkGreen">
            
        </Grid>
    </Shell.TitleView>

    <!-- content goes here -->

</ContentPage>

NavigationPage

When a NavigationPage is used instead of Shell, then it should be BarBackgroundColor, e.g.:

MainPage = new NavigationPage(new MyContentPage())
{
    BarBackgroundColor = Colors.DarkGreen
};

This should be similar for TabbedPage.