Light and dark theme for my Maui Blazor app

user_693560 0
Viewed 1148

I would like to implement light and dark theme inside of my Maui Blazor application. As you know, Blazor is nothing other than Html and Css so I easily implement dark and light theme for the content of my app (thanks to a simple .dark class added on the html tag).

The problem I am facing is for the upper and lower part of the Maui application.

Let me show you by an example.

Android version

enter image description here

iOS version

enter image description here

The pictures above show you the current situation: on the left, the light theme and on the right, the dark theme. As you can see, the dark theme is problematic for the top and bottom sections (only the top section is problematic for the iOS version).

What I would like to achieve: the top and bottom sections should be colored the same as the content of the page:

  • #292929 for the Dark theme
  • #FFFFFF for the Light theme

Something like the picture below: when switching to the dark theme, everything is coloured.

I have no idea how to achieve this for Maui Blazor and I have no experience with Xamarin.

Can you point me to the right direction please ?

enter image description here

As you probably know, BlazorWebView enables you to host a Blazor web application right in the .NET MAUI application.

enter image description here

maui-blazor maui blazor
1 Answers

Within the next month or two, it should become possible to do this via StatusBarEffect and NavigationBarEffect in MAUI Community Toolkit. Discussion here - for Xamarin Toolkit.

Those effects are currently in branch xamarin.develop of Xamarin.Community.Toolkit. The change will also get merged to Maui Toolkit, not sure when exactly.

Below is based on that source code, adapted to work with MAUI. Tested.

Android:

public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Android.OS.Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        SetColors();
    }

    private void SetColors()
    {
        if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Lollipop) {
            // Aqua.
            var color = Microsoft.Maui.Graphics.Color.FromRgb(0, 255, 255);
            // The thin bar at top of Android screen.
            Window.SetStatusBarColor(color.ToNative());
            // The thicker bar at bottom of Android screen.
            Window.SetNavigationBarColor(color.ToNative());

        }
    }

}

That sets the colors when the app starts up. The effects will contain the extra logic needed to set those colors dynamically. (Until those effects exist, you could save a value in persistent storage, force your app to restart, read that flag back to know what color to apply. OR you can make a dependency service in Android, to call from X-Forms code. Will need to use Device.BeginInvokeOnMainThread.)

iOS:

...TBD...

Setting status bar color can be seen in ShaXam/iOS/StatusBarStyleManager/.

The essential lines are these (I think):

UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.DarkContent, false);
            
GetCurrentViewController().SetNeedsStatusBarAppearanceUpdate();

iOS - Not tested.

user_1993640
Related