6

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

Brandon Minnick
  • 13,342
  • 15
  • 65
  • 123
Bronzato
  • 9,438
  • 29
  • 120
  • 212
  • [Doc - Respond to system theme changes](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming/system-theme-changes) - does this help? – ToolmakerSteve Dec 07 '21 at 19:36
  • See also [How to use Light Theme](https://stackoverflow.com/q/63393023/199364). – ToolmakerSteve Dec 07 '21 at 19:38
  • @ToolmakerSteve thanks for your links, I tried to inspire myself from these examples. Unfortunately my experience with Xamarin is null so I failed porting that into my Maui project. – Bronzato Dec 09 '21 at 18:36
  • Can you get it to work in one of the xamarin examples? If so, post the code that works (in xamarin), as part of your question. I mean, make a Xamarin Forms project, get it to work in that - without the Blazor code. Except for Blazor, the best way to prepare for MAUI (before it is final, and documented), is to work in XF. Because there are docs, examples, and people who can help. Only experienced XF app devs are likely to get far with MAUI at this time. – ToolmakerSteve Dec 09 '21 at 19:02
  • If no other way, I'll dive into Xamarin Forms deeper (and try to build a working project) but honestly I did not imagine it was so tricky to "simply" implement dark/light theme for Maui. – Bronzato Dec 09 '21 at 20:08
  • @Bronzato Can you explain how you _easily implement dark and light theme for the content of my app (thanks to a simple .dark class added on the html tag)_? I'd appreciate it a lot – Gianpiero Oct 20 '22 at 09:34

1 Answers1

3

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.

ToolmakerSteve
  • 18,547
  • 14
  • 94
  • 196
  • Thank you very much for your help. I'll try that today and I'll post here my results to keep you informed. – Bronzato Dec 10 '21 at 13:16