'Disable dark theme in Ionic

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 1:^[1]

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.

Solution 2:^[2]

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

Solution 3:^[3]

Go to your index.html end set:

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

Its force phone use yout default dark mode styles

Solution 4:^[4]

Go to "Theme" there you find the "variable.scss" folder search for the content below

  .md body {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18,18,18;

See there is --ion-background-color: #121212;, change to your preferred color. Thank you!

Solution 5:^[5]

Add these in your component.ts file, after platform ready:

document.body.setAttribute('data-theme', 'light');
document.body.classList.toggle('dark', false);

initializeApp() {
  this.platform.ready().then(() => {
    document.body.setAttribute('data-theme', 'light');
    document.body.classList.toggle('dark', false);
    SplashScreen.hide().then( () => { console.log('SplashScreenHide') } );
  });
}

Solution 6:^[6]

For Ionic 6 you need to go to variables.css and delete or comment-out this block:

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

That fixed it for me.

Setting <meta name="color-scheme" content="light" /> didn't help.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Santiago
Solution 2
Solution 3	Hérick Raposo
Solution 4	Maxim Masiutin
Solution 5	Aldán Creo
Solution 6	Kirill Groshkov

'Disable dark theme in Ionic

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]