iOS Bug - Display swaps to dark mode when refocusing the app while the bottom sheet is visible.

[AndreiRataIntercede]

Hello!
This issue has been driving me nuts. The app always changes the theme of the page displayed behind the bottom sheet after backgrounding the app and refocusing on it. Anybody else encountered this issue? I know its an edge case, but I would really appreciate any sort of help.

Environment: .NET 8.0.1

The issue does not show anywhere else when backgrounding the app.

Update:
-this issue is present on the iPhone14 (iOS 17.1.2). However, I could not reproduce it on the iPhone 12 mini (iOS 16.6.1)
-this issue happens "in reverse as well"(meaning when the dark mode is enabled-> the background page changes colour to light mode)

ThemeSwap.1.mov

[ITEthan]

I too am experiencing this issue, or rather the inverse. (On an iPhone 12 Pro Max iOS 17.1.2)

My phone is set to dark theme and after leaving my app and opening it up again, the app switches to light theme. So I assume the bug must either change the theme to whatever isn't the devices default or otherwise toggle it from what it was at launch.

In my case it's quite detrimental as my bottom sheet is permanent (very similar to the bottom sheet on the iOS native Maps app).

I've not been using MAUI for long so I'm unsure how obvious this is, but I have a native apple maps window in my app behind the bottom sheet and that remains dark theme and only changes if I come out of dark mode at an OS level. Therefore, it is only the MAUI UI elements theme that is affected.

I haven't finished pursuing this work around, but I have started looking at the possibility of subscribing to the Resumed event, and correcting the theme at that moment, if my event listening solution somehow fires the correction before the theme is incorrectly set, I plan to spam the correction for about a second to ensure the correct theme is applied.

As I say, I've not finished pulling this thread, but thought I'd mention it in case it helps others pursue a work around.

[MarcAlx]

Same experience here.

After a fast research, can it be related to this line (side effect)? https://github.com/the49ltd/The49.Maui.BottomSheet/blob/e3401df656e40f38ec510fabf1cccb3d15098825/src/Platforms/iOS/BottomSheetViewController.cs#L78C48-L78C64

[MarcAlx]

Same experience here.

After a fast research, can it be related to this line (side effect): https://github.com/the49ltd/The49.Maui.BottomSheet/blob/e3401df656e40f38ec510fabf1cccb3d15098825/src/Platforms/iOS/BottomSheetViewController.cs#L78C48-L78C64

After some test with the sample app, it seems not related to this plugin code.

One way to circumvent this problem is to force App to Light theme (while not reacting to any theme change...), using the following line:

Application.Current.UserAppTheme = AppTheme.Light;

Forcing to dark theme doesn't avoid the bug.

[AndreiRataIntercede]

Hi MarcAlx, thanks for trying, unfortunately for the release version I am working on, its a requirement to follow the OS theme. I'm sad to say, but I will probably have to look somewhere else for the bottom sheet control.

[RobGibbens]

This might be related to this issue in MAUI : dotnet/maui#15962

[ITEthan]

Hi MarcAlx, thanks for trying, unfortunately for the release version I am working on, its a requirement to follow the OS theme. I'm sad to say, but I will probably have to look somewhere else for the bottom sheet control.

Potential workaround I've not investigated:

Could you force light theme, but amend the colours used in your light theme to be dark theme colours if the OS theme is dark theme? Basically fake dark theme in your light theme.

[MarcAlx]

Hi MarcAlx, thanks for trying, unfortunately for the release version I am working on, its a requirement to follow the OS theme. I'm sad to say, but I will probably have to look somewhere else for the bottom sheet control.

Potential workaround I've not investigated:

Could you force light theme, but amend the colours used in your light theme to be dark theme colours if the OS theme is dark theme? Basically fake dark theme in your light theme.

It may work, but you don't react to OS theme change this way.

[ITEthan]

Hi MarcAlx, thanks for trying, unfortunately for the release version I am working on, its a requirement to follow the OS theme. I'm sad to say, but I will probably have to look somewhere else for the bottom sheet control.

Potential workaround I've not investigated:
Could you force light theme, but amend the colours used in your light theme to be dark theme colours if the OS theme is dark theme? Basically fake dark theme in your light theme.

It may work, but you don't react to OS theme change this way.

You can subscribe to an OS theme change event, in which case you could amend the colour scheme back to the light theme scheme.

But we're going very far down a very deep rabbit hole for what is simply a work around.

[MarcAlx]

Hi MarcAlx, thanks for trying, unfortunately for the release version I am working on, its a requirement to follow the OS theme. I'm sad to say, but I will probably have to look somewhere else for the bottom sheet control.

Potential workaround I've not investigated:
Could you force light theme, but amend the colours used in your light theme to be dark theme colours if the OS theme is dark theme? Basically fake dark theme in your light theme.

It may work, but you don't react to OS theme change this way.

You can subscribe to an OS theme change event, in which case you could amend the colour scheme back to the light theme scheme.

But we're going very far down a very deep rabbit hole for what is simply a work around.

Yes very deep ^^,

For further readers, this way you have to override (on theme change) all your style Light to use another color.

To my knowledge you can't just apply a whole new theme asis. MAUI only handle "Light" "Dark".

[borrmann]

The following workaround works for me:

When changing the UserAppTheme, also store the value in preferences

[RelayCommand]
private void SetUserAppTheme(AppTheme theme)
{
    Preferences.Default.Set("usertheme",  (int)theme);
    Application.Current.UserAppTheme = theme;
}

Then, load you UserAppSettings on Resume and Start in App.xaml.cs by loading the value from Preferences:

    private AppTheme GetTheme()
        {
            try
            {
                int value = Preferences.Default.Get("usertheme",  (int)AppTheme.Unspecified);
                return (AppTheme)value;
            }
            catch
            {
                return AppTheme.Unspecified;
            }
        }
    protected override void OnStart()
    {
        Application.Current.UserAppTheme = GetTheme();
    }

    protected override void OnResume()
    {
        Application.Current.UserAppTheme = GetTheme();
    }

[MarcAlx]

@borrmann your workaround is only partial to me.

Mainly because you have to set explicitly UserAppTheme and not let the app react to system wide theme change.

After some tests here's what I found, when going in background (at least on iOS), MAUI fires two Application.Current.RequestedThemeChanged one for the opposite of the current system theme (why?) and one for the current system theme. It's a strange behavior but everything goes back to normal.

But if a BottomSheet is open these events behave differently, causing the app to turn dark on resume

To reproduce, add a simple event handler:

Application.Current.RequestedThemeChanged += (sender, args) => {
    //check theme here
};

I would like to open an MAUI issue but I need more context on why BottomSheet (or the underlaying class it uses) may change this behavior.

[borrmann]

@MarcAlx when setting UserAppTheme to unspecified the app reacts to system changes. I have dark, light and system as optional settings in my app and by using the workaround, all three of them work, also when backgrounding and reopening when a BottomSheet from this library is visible.

[MarcAlx]

@borrmann thanks for your reply.

Unfortunately in my case setting, letting or re-applying (on resume) App.Current.UserAppTheme to AppTheme.Unspecified;` doesn't fix the theme bug.

Observed on iOS Simulator 17.4 and real device iOS 17.4.1.

PS My app only reacts to system wide theme App.Current.RequestedTheme, there's no in-app setting that let user change the App.Current.UserAppTheme.

[borrmann]

@MarcAlx Interesting. I guess in my app this works, because I always set a background color and never use iOS defaults. It also requires to not use any transparent backgrounds in the deepest layer of any page, so iOS' background does not shine through. It can be a bit tricky with status and navbar, but when those are also handled by the app then it should work.
So if you set the background on each ContentPage with something like this,

{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}

AND use the workaround above AND ensure that the colours of the StatusBar and Navbar are also bound to the AppThemeBinding, then it should work.

This is definitely quite annoying, but because the state of RequestedTheme seems broken, it seems like the only option, unless someone comes up with a bug fix to ensure RequestedTheme is always correct.

[MarcAlx]

@borrmann this remains a mystery to me.

In my app there's no "unspecified background" everything is bound to a toolkit:AppThemeResource where toolkit is xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" so that it's always theme aware.

Thanks for your help, I'll keep this in mind and come back if I found something useful.

[borrmann]

@MarcAlx
You are right, altough it fixed the issue for me in a lot more cases, it doesn't cover all.
I did some more digging and it seems like the issues goes down to xamarin ios, so it's not evem a bug in MAUI.
see here

The workarounds there seem quite dangerous to me or at least I don't really know what they are doing.
A bit simpler, would be something like the following.
This code could be called anywhere in the application (e.g. during navigation or so), to ensure the theme changes also while the app is open:

#if IOS
if (UIKit.UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
{
    var scene = UIKit.UIApplication.SharedApplication.ConnectedScenes.ToArray().FirstOrDefault();
    if (scene != null)
    {
        var windowScene = (UIKit.UIWindowScene)scene;
        var userInterfaceStyle = windowScene.TraitCollection.UserInterfaceStyle;

        App.Current.UserAppTheme = userInterfaceStyle == UIUserInterfaceStyle.Dark ? AppTheme.Dark : AppTheme.Light;
    }
}
#endif

Or add this to AppDelegate.cs in case you are fine with updating the theme only when the app is activated

public override void OnActivated(UIKit.UIApplication application)
{
    base.OnActivated(application);
    // add snippet here
}

I first tried with OnResume/OnStart in App.cs, but then I noticed that they do not always fire, so it is better to do it in AppDelegate......

This code now only covers when one always want to use the system default. When giving the user the option for Dark, Light, System, a mix of my workaround above and this one should do it.

[borrmann]

I have created a repo with the entire solution here.
It covers light, dark and system and immediately updates to the correct theme. When a bottom sheet is open, the theme is updated once the bottom sheet is closed, which should not be a problem in most cases. With the provided service, there should also be a way to update the change while the bottom sheet is open.

Here is a video:

themes.mp4

[ITEthan]

Unsure if people are still having this issue, but this has stopped happening for me since updating to iOS 18 (using iPhone 12 Pro Max).
I did make some changes binding the bottom sheet background colour to the app theme using Background= "{AppThemeBinding Light=LightYellow, Dark=Black}"

Unsure which change has actually fixed this, but I no longer have the issue.

EDIT: Payed closer attention and the theme does in fact try to go Light whilst the app is being reopened, but as soon as it's full screen it immediately reverts to dark theme. This makes me believe it might be the AppThemeBinding that's triggering a theme check when the app is active again, and that refreshes the theme across the whole app.

Either way, this problem still exists.

EDIT 2: When testing my app in light theme, I noticed this bug still occurs but inverse! The theme briefly flashes as dark theme whilst the app is taking the scree, then as soon as it's full screen, goes back to light.