Installed app suddenly becomes dark

Ionic Framework
1

Hi, i installed my ionic app since 2021 and now interface becomes dark, can anyone tell me how ti fix this ?

Screen Shot 2022-02-11 at 14.53.44
Screen Shot 2022-02-11 at 14.53.44423×773 54.8 KB

becomes
dark
dark720×1600 54.9 KB

2 Likes
2

Are you using Mac?
Dark / Light Mode automatically switch according system preferences on your Mac.
Your information is very limited for further comments.

3

i am using android and ionic 4.1.2…many people using this app and many of them have the same problem.
actually i have limited information because i don’t know what really happen, we have been using this app since 2021 and there is no problem until today that suddenly becomes dark.

4

same problem here… it started happening a couple of days ago… weird!

5

You’re probably supporting Dark Mode. Check Settings/Display & Brightness/Dark mode and see if it reflects in your app.

6

My app just starting do this too. I think there must have been a fix in Android WebView to actually make it dark when specified. The next version of my app has all the dark mode logic removed until we fully support dark mode.

You should be able to just remove the prefers-color-scheme: dark media queries in your variables.css and then in your public/index.html change the following:

// Change this
<meta name="color-scheme" content="light dark" />

// to
<meta name="color-scheme" content="light" />
8 Likes
7

I see the same problem.
Look like it depends on the android mode.
If I install the application at midnight then it will be installed in dark mode.
After reinstalling in work hours it uses light mode.

8

Take a look at this: Dark theme  |  Android Developers

9

Having the same issue on Android 10 on different devices. Toggling white/dark mode does not affect the issue; the app remains dark.

My primary suspect is WebView since it is updated on February 1st. When I look at the changelog, I see that Google has changed something in the way dark color schemes are used. See: CSS Color Adjust: 'only' keyword for color-scheme - Chrome Platform Status. So it should be ‘only light’ instead of ‘light’? E.g.: <meta name="color-scheme" content="only light" />

Edit: nope, doesn’t work…

1 Like
10

Fyi: related issue on GitHub

12

Same problem here. I got the last Webview Update at 2022-01-19. Since Friday (2022-02-11) my App is in Dark Mode. Delete an Reinstall: everything is fine, but after closing and reopening: App is in Dark Mode.
Thanks to YoeriNijs with body.dark my App opens light Mode.
Edit: when opening and Splashscreen dissapears, for a short moment App starts in dark Mode, and then switch to light Mode

14

Check if this helps. There is a variables.scss under root/theme.

My solution was to replace the colors in

/*

  • Material Design Dark Theme

*/

I commented out everything from “–ion-background-color: #121212;” and put in my own color scheme.
meta name=“color-scheme” content=“only light” didn’t work for me.

15

In my case it has worked correctly. Thank you!

16

Thanks I got the same problem and this solution works correct for me! :+1:

17

This worked for me, thank you.

18

This appears to be related to the WebView change - see this issue.

TL;DR - the WebView update exposed an issue in Capacitor (to be fixed in v4), which needs a minor change in styles.xml to allow the user’s theme selection to be used correctly.

1 Like
19

Hi,
Did you find root cause this error?

20

Thank you; your solution was ideal for me!