Disable dark theme in Ionic

T

8

26

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

Trypsin answered 8/9, 2020 at 13:4 Comment(0)

P

20

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.

Parlous answered 15/3, 2021 at 15:22 Comment(2)

Thanks! this was the solution for a iframe that was converting in dark mode in some android devices – Fecundate 25/1, 2022 at 11:36

I think this is a good workaround for that case, but it's against the UX and accesibility. – Paget 29/1, 2022 at 10:11

F

50

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

Frequentation answered 8/9, 2020 at 13:10 Comment(7)

Thanks for the idea! However, I don't have such lines in my Ionic project, so I can't remove them. – Trypsin 9/9, 2020 at 8:0

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)? – Frequentation 9/9, 2020 at 15:13

@AldánCreo curious to know if you were able to solve this issue and how? :) – Frequentation 14/10, 2020 at 16:43

@Aldán Creo hi, have you solved this problem? I'm facing same – Gudgeon 19/11, 2020 at 3:42

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. – Trypsin 7/1, 2021 at 1:48

I've solved the problem, at least in the Xiaomi devices I can test, just including the '<meta name="color-scheme" content="light dark" />' on the <head> of the Ionic app. ¿Have you tried, @AldánCreo? – Parlous 11/3, 2021 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 :) – Trypsin 13/3, 2021 at 0:3

P

20

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.

Parlous answered 15/3, 2021 at 15:22 Comment(2)

Thanks! this was the solution for a iframe that was converting in dark mode in some android devices – Fecundate 25/1, 2022 at 11:36

I think this is a good workaround for that case, but it's against the UX and accesibility. – Paget 29/1, 2022 at 10:11

F

11

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.

Fatigued answered 17/4, 2022 at 20:51 Comment(1)

this helped, I will deal with dark theme later – Lavina 30/6, 2022 at 23:0

K

8

Go to your index.html end set:

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

Its force phone to use your default light mode styles

Krenek answered 12/3, 2021 at 20:29 Comment(3)

This not solve the problem with Xiaomi devices. – Parlous 15/3, 2021 at 15:23

Run the command "ionic cordova run android" without using --device, I tested it on my redmi note 7 phone and it worked – Blinding 18/3, 2021 at 17:7

This worked perfectly for me using Cordova. Thanks. – Manifesto 21/9, 2021 at 15:21

P

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!

Pasteurizer answered 16/8, 2021 at 14:52 Comment(1)

I believe this solution doesn't apply, because, as @Parlous pointed out, Xiaomi forces the dark mode. So it would force it anyway, even with this fix. – Trypsin 17/8, 2021 at 8:23

W

3

You can try this in latest Ionic 8.0.0 version: VSCode screenshot

In global.scss you comment out this statement:

//@import "@ionic/angular/css/palettes/dark.system.css";

Whitehead answered 17/5 at 5:22 Comment(1)

this is working for me – Abingdon 30/6 at 3:29

D

0

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') } );
  });
}

Divisible answered 21/2, 2022 at 8:23 Comment(0)

C

0

add in ion-row --background: none; in your css file it worked for me then add if your text is affected. under your h2 h3 headers color: and the color you want it to be. this worked for me perfectly.

Claus answered 2/2, 2023 at 14:28 Comment(0)

Recommended topics

Hot tags