[BUG] StatusBarColor with AppThemeBinding doesn't reflect changes of light/dark mode on the fly

[RsZoli]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

When setting the StatusBarColor with AppThemeBinding, changes of light/dark mode doesn't get reflected on the fly!

The page needs to be navigated to once more for the changes to take effect!

Screen_Recording_20241028_1000142.mp4

Expected Behavior

Changes should take effect on the fly!

Steps To Reproduce

1. Open and run solution from reproduction repository.
2. Click the button titled "StatusbarBehavior repro 3" and observe the bug.

Link to public reproduction project repository

https://github.com/RsZoli/GitHubRepros

Environment

• .NET MAUI CommunityToolkit: 9.1.0
• OS: Windows 11 22631.4317
• .NET MAUI:
  android 34.0.138/8.0.100 SDK 8.0.400, VS 17.11.35327.3
  ios 18.0.8303/8.0.100 SDK 8.0.400, VS 17.11.35327.3
  maui-windows 8.0.82/8.0.100 SDK 8.0.400, VS 17.11.35327.3

Anything else?

No response

[jakob-bmd]

I created another repo based on @jfversluis MauiToolkitStatusBarBehaviorSample:

https://github.com/jakob-bmd/MauiToolkitStatusBarBehaviorAppThemeBindingBug/tree/main

Steps To Reproduce
GIVEN: user is in mainpage of the app
WHEN: changing the android OS Theme to (e.g.) black and navigating back to the app
THEN: the statusbar stays white

Expected Behavior
the color of the statusbar should change immediately with the OS theme change

Additional Info
The statusbar color changes correctly, when hotreload takes place

Environment

• .NET MAUI CommunityToolkit: 9.1.1
• MauiVersion 8.0.93
• Android 33

[vniehues]

My current (crude) workaround is subscribing to the RequestedThemeChanged event and manually setting the colors and styles but I feel like this functionality should be in the Behavior itself.

        Application.Current.RequestedThemeChanged += (sender, args) =>
        {
            switch (args.RequestedTheme)
            {
                case AppTheme.Dark:
                    StatusBar.SetColor(Application.Current.Resources["OffBlack"] as Color);
                    StatusBar.SetStyle(StatusBarStyle.LightContent);
                    break;
                case AppTheme.Light:
                case AppTheme.Unspecified:
                    StatusBar.SetColor(Colors.White);
                    StatusBar.SetStyle(StatusBarStyle.DarkContent);
                    break;
            }
        };

[vhugogarcia]

Hi @vniehues, thanks so much for reporting this issue!

It seems that this isn't a bug, but rather a topic for discussion around integrating a feature to detect when a requested theme has changed. Because of this, I’m moving this to a discussion. If it gains enough interest and votes, it can be considered for future implementation.

[stephenquan]

This is another workaround based on being able to call the C# methods directly:

CommunityToolkit.Maui.Core.Platform.StatusBar.SetColor(statusBarColor);
CommunityToolkit.Maui.Core.Platform.StatusBar.SetStyle(StatusBarStyle.LightContent);

With this, we can introduce StatusBarColor and StatusBarStyle as BindableProperties on your ContentPage, e.g.

// MainPage.xaml
public partial class MainPage : ContentPage
{
    public static readonly BindableProperty StatusBarColorProperty = BindableProperty.Create(
        nameof(StatusBarColor),
        typeof(Color),
        typeof(MainPage),
        Colors.Black,
        propertyChanged: (b, o, n) => ((MainPage)b).OnSetStatusBarColor());
    public Color StatusBarColor
    {
        get => (Color)GetValue(StatusBarColorProperty);
        set => SetValue(StatusBarColorProperty, value);
    }

    private void OnSetStatusBarColor()
    {
#if ANDROID || IOS
        if (StatusBarColor is Color color)
        {
            CommunityToolkit.Maui.Core.Platform.StatusBar.SetColor(color);
        }
#endif
    }

    public static readonly BindableProperty StatusBarStyleProperty = BindableProperty.Create(
        nameof(StatusBarStyle),
        typeof(StatusBarStyle),
        typeof(MainPage),
        StatusBarStyle.DarkContent,
        propertyChanged: (b, o, n) => ((MainPage)b).OnSetStatusBarStyle());
    public StatusBarStyle StatusBarStyle
    {
        get => (StatusBarStyle)GetValue(StatusBarStyleProperty);
        set => SetValue(StatusBarStyleProperty, value);
    }

    private void OnSetStatusBarStyle()
    {
#if ANDROID || IOS
        if (StatusBarStyle is StatusBarStyle style)
        {
            CommunityToolkit.Maui.Core.Platform.StatusBar.SetStyle(style);
        }
#endif
    }

    public MainPage()
    {
        OnStatusBarColor();
        OnStatusBarStyle();
        InitializeComponent();
    }
}

Then, you can happily use AppThemeBinding in XAML:

<ContentPage
    x:Class="Maui.StatusBarDemo.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    StatusBarColor="{AppThemeBinding Light=Black, Dark=White}"
    StatusBarStyle="{AppThemeBinding Light=LightContent, Dark=DarkContent}">
    <!-- ... -->
</ContentPage>

The next logical step is to refactor this into a reusable BaseContentPage.