Dark Mode auto-detect broken on Android with Chrome Webview 98

#1

It looks like Google made a change to the Webview with the Chrome 98 update, and suddenly all apps are showing in Dark mode (even if the user did not choose dark mode). We’re seeing this happen on the second launching of the app, not the first after install.

It looks like they possibly changed something in prefers-color-scheme support, some more info here: Installed app suddenly becomes dark - Ionic Framework - Ionic Forum

Is there a workaround that still allows to use autoDarkTheme?

#2

We also have this issue! I don’t think it is related to Framework7 itself.

In our case, we use the cordova qr scanner plugin. Normally, we set transparent background color on body and f7 app container when the qr scanner is started, so the camera view behind the html is visible. But now, when the user has the body background is somehow overridden with black and the camera view is invisible.

So altough we don’t declare dark theme support through media query, Android decides to put black background on random div containers on it’s own… :rage: This behavoir seems dependant of the phone’s brand. My Samsung test device does work as expected, but a customer with a Xiaomi 8 has this problem.

1 Like
#3

@Tim you can disable the chrome auto dark thing by setting the css global root.

:root {
color-scheme: only light;
}

However to fix this you can use the plugin cordova-plugin-theme-detection and then in my case

Also advice in the app params to set
  autoDarkTheme: device.android?false:true, //In android webview prefers-color-scheme media query is bugged. So this does not applies to cordova android webviews.

And on app mount or something:

cordova.plugins.ThemeDetection.isDarkModeEnabled(function (a) {
          if (a.value === false) {
            document.getElementsByTagName('html')[0].classList.remove('theme-dark');
}
        })