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.