7

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: dark theme disabled

However, when I enable the dark theme on an Android phone, it gets automatically converted to this:

dark theme enabled

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)?

Aldán Creo
  • 432
  • 4
  • 10

3 Answers3

10

One way to remove the dark theme would be by editing the variables.scss file and removing this style rule:

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

That media query is the one that changes all the colors of the CSS custom properties when the users selects the dark theme on the device.

Please also take a look at the color-scheme meta-tag from the index.html file:

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

You can find more information about it in the Ionic Docs

sebaferreras
  • 41,734
  • 10
  • 105
  • 127
  • Thanks for the idea! However, I don't have such lines in my Ionic project, so I can't *remove* them. – Aldán Creo Sep 09 '20 at 08:00
  • Oh, interesting. @AldánCreo If you debug the app running on that device, is there any CSS custom property being set to any of the "dark" colors that are shown in the app (for example the background of the page)? – sebaferreras Sep 09 '20 at 15:13
  • @AldánCreo curious to know if you were able to solve this issue and how? :) – sebaferreras Oct 14 '20 at 16:43
  • @Aldán Creo hi, have you solved this problem? I'm facing same – Prabhashi Buddhima Nov 19 '20 at 03:42
  • 2
    Unluckily, I haven't been able to solve it. It seems to be a problem that occurs only on Xiaomi smartphones, and related to the way they specifically handle dark themes. – Aldán Creo Jan 07 '21 at 01:48
  • I've solved the problem, at least in the Xiaomi devices I can test, just including the '' on the of the Ionic app. ¿Have you tried, @AldánCreo? – Santiago Mar 11 '21 at 10:35
  • I haven't tried, and unfortunately I won't be able to, because I no longer have access to either a Xiaomi device or the source code of my application, but I encourage you to submit your solution as an answer if you're confident it solves the problem :) – Aldán Creo Mar 13 '21 at 00:03
2

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.

Santiago
  • 156
  • 5
0

Go to your index.html end set:

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

Its force phone use yout default dark mode styles

Hérick Raposo
  • 11
  • 1