Issue
I'm designing an Ionic app, and I would like it to have white backgrounds and black texts whether the user has enabled the dark theme or not.
This is what I want:
However, when I enable the dark theme on an Android phone, it gets automatically converted to this:
I want to prevent this from happening. I've searched online and found many articles that describe how to apply the dark theme, but I haven't found anything about disabling it.
One solution I've thought about is explicitly enabling the dark theme, and then setting the same colors for the dark theme as for the light theme. However, I think that approach might be undesirable, as it involves writing a lot of redundant code.
Can you think of any alternative solution(s)?
Solution
In this case, Xiaomi MIUI forces a 'best effort' dark mode when the app doesn't recognize a dark mode support on it's code. That's is, basically every white will be black and vice versa, but also some other colors will be darkened automatically.
To avoid this, just 'inform' to the MIUI that our app is dark mode compatible, even if there isn't any extra changes, so in fact dark and light mode will be the same, but MIUI won't interfered with the colors of the app.
Just put inside <head> the next line:
<meta name="color-scheme" content="light dark" />
Important: Now your app will be dark mode compatible, so be carefull to set every color and background of your components, if not and you let for the defaults, keep in mind that the defaults don't be the same for dark and light modes.
Answered By - Santiago
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.