Customizing Status Bar Colors on Mobile

UnoFeatures: Toolkit (add to <UnoFeatures> in your .csproj).

Problem

iOS and Android provide default appearances for the status bar, but developers often need to customize it to match their app's design or theme.

Solution

StatusBar extensions provide a quick way to set the background and foreground colors of the current page's status bar.

<Page ...
      xmlns:utu="using:Uno.Toolkit.UI"
      utu:StatusBar.Background="{ThemeResource SurfaceBrush}"
      utu:StatusBar.Foreground="Auto">

      ...

</Page>

For iOS add:

<!--info.plist-->
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

The above code has the following effect:

Not set Light mode Dark mode
StatusBar not set StatusBar light mode StatusBar dark mode

Source Code

Documentation