How to change status bar colour while using xamarin shell - xaml

Question

I'm using Xamarin Shell to display navigation drawer and some tabs.
I need to change the status bar colour. I searched many solutions but everything works when we don't go for Xamarin shell based navigation drawer.

Answer 1

We could set the style of Shell navigation bar in Resource Dictionary
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="Red" /> // set navigation bar color here
<Setter Property="Shell.ForegroundColor" Value="Blue" />
<Setter Property="Shell.TitleColor" Value="Blue" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>

Answer 2

You can also do it in the Content Page XAML. I prefer it this way when the bar color needs to change for each page, which I do a lot.
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BaseApp.Pages.MainMenuPage"
Shell.BackgroundColor="{DynamicResource GradiantRedToOrange_End}"
Shell.ForegroundColor="White"
Shell.PresentationMode="Animated">
To change the nav bar background color
Shell.BackgroundColor="{DynamicResource GradiantRedToOrange_End}"
To change the title text and nav button color
Shell.ForegroundColor="White"