bug: Android forces Dark Mode on my Ionic apps

[Sibi4]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Xiaomi phones all of a sudden force Dark Mode on my Ionic Apps. Background color of the app has changed from white to black, the text from black to white. Also some buttons with CSS classes='primary' have now changed color. Dark mode in my phone is not active.
This happened for the first time on February 10th, 2022. Till this day, my Ionic apps on Xiaomi phones were running perfectly fine.
Do you have any idea how can I solve this issue?

Edit: now I have this problem on all Android phones (Samsung, Xiaomi, etc).

Expected Behavior

My app must have Light mode. Dark mode must not be forced.

Steps to Reproduce

I have noticed the same behaviour only in Xiaomi phones.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.13.1
Ionic Framework : @ionic/react 5.6.0

Capacitor:

Capacitor CLI : 3.0.0
@capacitor/core : 3.0.0

Utility:

cordova-res : not installed
native-run : 1.3.0

System:

NodeJS : v14.17.0 (C:\Program Files (x86)\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

Additional Information

Android version: 11

[scr2em]

@Sibi4 Hi, can you provide pictures of the case and what android versions have you tested this on ?

[Sibi4]

@Sibi4 Hi, can you provide pictures of the case and what android versions have you tested this on ?

Android version 11. Regarding the pictures, they are a bit large. I',m sorry, I don't really know how to fix them. The white background is the right one, I took the screenshot from a Samsung. The black background happens in Xiaomi phone.

[liamdebeasi]

Thanks for the issue. What version of the Chrome webview is running on that Xiaomi phone? To find this, you can log window.navigator.userAgent when inspecting your app with Chrome Dev Tools.

Also, can you please provide a GitHub repo I can use to reproduce the issue?

[Umfi]

I also had this problem with an Ionic 6 app using my Xiaomi device running Android 11. I didn't even made any style related changes. Also the removing of the @media (prefers-color-scheme: dark) {} section in src/theme/variables.css didn't helped.

After some testing around I used following quickfix to fix the problem.

Remove the @media (prefers-color-scheme: dark) {} section in src/theme/variables.css. Instead add the body.dark css rules and append dark class manually to the body on app start, if dark mode is enabled.

In public/index.html replace
<meta name="color-scheme" content="light dark" />
with
<meta name="color-scheme" content="light" />

UserAgent: Mozilla/5.0 (Linux; Android 11; Mi A3 Build/RKQ1.200903.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/98.0.4758.87 Mobile Safari/537.36

[Piedade]

This bug also happens on Huawei phones
Changing <meta name="color-scheme" content="light" /> dind't work for me.

'Mozilla/5.0 (Linux; Android 11; M2007J20CG Build/RKQ1.200826.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/98.0.4758.87 Mobile Safari/537.36'

--

Maybe is related with cached files. If we clean up them it seems to fix. At first boot the colors are fine. If we close the app and then open again the error occurs.

[YoeriNijs]

It is not only Xiaomi. I can confirm that this is the case on Nokia and Fairphone (Android 10) devices. It happens since this week. @Sibi4 could you please change the title so it is clear that this issue does not affect only Xiaomi?

I've also tried to disable dark mode in the color scheme, but that did not help. I can confirm that after a reinstall the app background is white. However, after closing the app and reopening it, the background turned black.

On February 1st, WebView is updated. When I read some reviews after that time period, I notice that a lot of apps crash somehow. I think this is related.

[YoeriNijs]

Forum topic: https://forum.ionicframework.com/t/installed-app-suddenly-becomes-dark/220376

[YoeriNijs]

Suspect: https://chromestatus.com/feature/5157621012103168

So it should be ‘only light’?

<meta name="color-scheme" content="only light" />

Edit: nope, doesn't work.

[Sibi4]

After some testing around I used following quickfix to fix the problem.

Remove the @media (prefers-color-scheme: dark) {} section in src/theme/variables.css. Instead add the body.dark css rules and append dark class manually to the body on app start, if dark mode is enabled.

@Umfi, I didn't understand this line. Could you please explain it to me? Where should I put body.dark css rules? Inside which file?

[Umfi]

@Sibi4
Have a look at my source file.

https://github.com/Umfi/my-fitness-app/blob/master/src/theme/variables.css

I moved the content from within @media (prefers-color-scheme: dark) {} outside of it. And added the class "dark" to the body,

So instead of
@media (prefers-color-scheme: dark) { body { . . . } }

it's now

body.dark { . . . }

And on app start i manually append the class dark to the body if dark mode should be active.

I hope this is clear.

[martinpllu]

We see this issue in our app on Pixel 4a / Android 12 (ionic-native 5.36.0, capacitor 3.3.3)

"Mozilla/5.0 (Linux; Android 12; sdk_gphone64_arm64 Build/SE1A.211012.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/91.0.4472.114 Mobile Safari/537.36"

One of our users also reports the same problem on Pixel 3.

The problem only seems to affect our ionic UI packaged inside a native capacitor app. The PWA version of the app looks OK in Chrome on the device.

[Sibi4]

@Sibi4 Have a look at my source file.

https://github.com/Umfi/my-fitness-app/blob/master/src/theme/variables.css

I moved the content from within @media (prefers-color-scheme: dark) {} outside of it. And added the class "dark" to the body,

So instead of @media (prefers-color-scheme: dark) { body { . . . } }

it's now

body.dark { . . . }

And on app start i manually append the class dark to the body if dark mode should be active.

I hope this is clear.

@Umfi , thanks :)

[wgrientidev]

@Umfi 's solution works well.

It would be nice though to know which Google update caused this mess.

[liamdebeasi]

Hi everyone,

Can someone please provide some steps to reproduce the issue? I am testing on a Pixel 4a with Android 12 and WebView 98 and cannot reproduce the issue.

[10Wired]

@liamdebeasi liamdebeasi My Phone is a Pixel 5 with Android 12 and Webview Version 97.0.xxx
Last Webview Update at 2022-01-19. Since Friday 11th of February my App is in dark Mode

[108174]

Hi, I have the same issue and I notice that, if you host the app on a server and access it in the browser then the style is indeed light. However, the Android version is dark regardless of the system settings. ( I have a Samsung s10 )

[rluttikhuizen]

We experience the same issue (for both Ionic React 5 and 6 on the latest Android Webview). Using code from ionic-team/capacitor#1978 in the various hooks of the MainActivity seems to be a workaround, but it would be nice if this is not needed for the media query ‘prefers-color-scheme’ to work out of the box on Android Webview.

[gusgonnet]

Unfortunately I am unable to reproduce this behavior, so there is not much I can do to help. Can someone please provide some steps to reproduce the issue or try and debug the issue further?

Hi Liam @liamdebeasi ,
I have invited you to a private repo I have that has this issue.
On the local browser with ionic serve, the app looks white but on the phone (pixel 5, Android 12) it comes up with a dark theme I have not enabled (at least on purpose).

Let me know if you see similar on your end.

Edit 1: I remember when I started this project 2 months ago, while on a Pixel 2 with Android 11 the app used the light theme. It could be there is an Android 12 issue at play here. I hope you have one around.

Edit 2: I removed the section that declares @media (prefers-color-scheme: dark) on variables.scss and the app uses the light theme again.

Thank you!

Local browser:

Android 12 Pixel 5 phone:

[liamdebeasi]

Hi everyone,

I am able to intermittently reproduce this behavior on my end. After investigating, this appears to be a behavior with the Android WebView, not Ionic.

Up until recently, the Android WebView did not have support for dark mode. Ionic ships with dark mode media queries, so when Android WebView started working with dark mode, your apps automatically switched to dark mode.

I do not know if this was an intentional change, but I do know this is not related to a bug in Ionic. I am going to close this, but feel free to file feedback on https://bugs.chromium.org/p/chromium/issues/list if you are running into bugs with this automatic dark mode switching. Thanks!

[scallacs]

Indeed it's not a bug related to Ionic.
If you use cordova, installing this plugin fixed dark mode detection for me : https://github.com/timbru31/cordova-plugin-android-dark-mode-support.

[gusgonnet]

Indeed it's not a bug related to Ionic.
@scallacs salut Stephane,
I fail to see the rationale here. How does installing a plugin external to Ionic prove that this is not a bug in Ionic?
Shouldn't Ionic have behaved in a way so you did NOT need to install a plugin to fix this?
Anyhow the bug is closed, so not much to discuss.
Merci

[liamdebeasi]

Ionic apps created via the CLI activate dark mode when the following CSS condition is met:

@media (prefers-color-scheme: dark) {

Source: https://github.com/ionic-team/starters/blob/main/vue/base/src/theme/variables.css#L79

Ionic does not manage the on/off state of dark mode. The only thing the media query does is apply different styles when the state of dark mode is "on".

The problem is that the webview is always reporting that prefers-color-scheme: dark is true. As a result, the dark mode theme applies. As I mentioned before, I recommend submitting feedback on https://bugs.chromium.org/p/chromium/issues/list.

[liamdebeasi]

The other thing I will note is if this is actively causing problems with your apps, you can temporarily remove dark mode support by disabling the @media (prefers-color-scheme: dark) check in your project.

You may also need to remove the color-scheme meta tag in your app's index.html file. However, the webview user agent may still change some styles (such as the body background color) due to this issue.

[gusgonnet]

The problem is that the webview is always reporting that prefers-color-scheme: dark is true. As a result, the dark mode theme applies.

Thank you @liamdebeasi for taking the time to explain a bit more!
That was very helpful to me. Kudos.

[enrique-lozano]

Indeed it's not a bug related to Ionic. @scallacs salut Stephane, I fail to see the rationale here. How does installing a plugin external to Ionic prove that this is not a bug in Ionic? Shouldn't Ionic have behaved in a way so you did NOT need to install a plugin to fix this? Anyhow the bug is closed, so not much to discuss. Merci

Totally agree with this. If there is a plugin or something that fixes the error it should come by default in ionic, we shouldn't have to install anything to make things work. Especially since the dark mode is something that comes by default when you create an app in ionic through the cli, it is something that should be already working from the beginning.

And if it is a temporary error of something external like the Android webView, it should not be us who report that error, but the Ionic team itself, because it is something that affects the framework a lot, it does not seem to me that this is a minor bug

[liamdebeasi]

The issue appears to be fixed with WebView 99 (Android System WebView Beta on Google Play).

According to https://chromestatus.com/features/schedule, Chrome 99 will be released on March 1st.

[rabhiaziz]

I have been pulling my hairs because the Dark mode,
My application takes the dark mode automatically, I don't know why.

ionic version:  6.18.1
angular: 13.0.0,
mobile: Samsung s9
Android: 10
one UI version: 2.5

So i solve this by deleting all dark scss:
In variables.scss
@media (prefers-color-scheme: dark){...}
in index.html
<meta name="color-scheme" content="light dark" />

We hope that issue solved soon...

[Sibi4]

@liamdebeasi, which feature in Chrome Release 99 solves our issue? https://chromestatus.com/features/schedule

[liamdebeasi]

The features listed on that page did not fix the issue. There is likely a bug fix commit somewhere in the codebase that fixed the issue. My inclusion of https://chromestatus.com/features/schedule was only to note that Chrome 99 is scheduled to release March 1st. WebView 99 should also be released around that time.

I am able to reproduce the issue with WebView 98, and I cannot reproduce the issue with WebView 99 which is why I suggested the issue is fixed in that version.

[distante]

@liamdebeasi did you already tried it with the released version?

I have it updated and the problem stills happens and in my device is a little bit more extreme.

The app starts on Dark Mode, and it forces the dark mode on the phone. I can not change dark mode unless I run adb shell settings put global low_power_sticky 0 and reboot the phone.

This is happening with a Poco F3 with MIUI 12.5.7 (Android 11).

My app has all the latest Capacitor updates until today and the userAgent reports Chrome/99.0.4844.58

[liamdebeasi]

If you are still running into issues, I recommend reporting this issue to the Chromium team: https://bugs.chromium.org/p/chromium/issues/list

[distante]

Will do!

[tetsuwanadam]

Just updated WebView (non-beta) to 99.0.4844.73 and I'm still seeing this issue. How's it looking for everyone else?

[enrique-lozano]

Yes, the problem is still happening for me also in the latest version of the webView. Does anyone have the link to the issue? I can not finde it here
https://bugs.chromium.org/p/chromium/issues/list

Let's hope it gets resolved soon because it's really annoying

[rluttikhuizen]

Yes we are also still experiencing the problem after the Webview upgrade to 99.x. In the meantime we are changing our MainActivity.java based on the following posts to fix the issue:

ionic-team/capacitor#1978
https://forum.ionicframework.com/t/dark-mode-not-working-capacitor/185400

[liamdebeasi]

This issue has appeared more frequently internally, so I reported this issue to the Chromium team: https://bugs.chromium.org/p/chromium/issues/detail?id=1312074. Please follow that thread for updates on this issue.

[jcesarmobile]

Based on the last comment on the issue liam reported, looks like the WebView will now match the theme of the app.

Capacitor apps use a dark theme by default, so all Capacitor apps will have dark mode enabled by default.

If you want to force light mode you can set a light theme by changing this line in res/values/styles.xml

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
to
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
or if you want it to automatically change based on the user setting you can use
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">

note that the theme change also affects other system dialogs such as web alert/prompt/confirm and the native equivalents from @capacitor/dialog plugin.

[findelallc]

@jcesarmobile after bit frustration for a while, your solution - just works like a charm!

[mariomka]

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">

I think this should be the default value for a new Ionic project...

[jcesarmobile]

It will in capacitor 4

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.