Dark Mode not working for ionic 5

Ionic Framework
1

Hi,
I’m trying to implement a dark mode (as described in the tutorial) in my app. I’m using Ionic v5 and it doesn’t seem to work.

I added all the variables described in the tutorial to my variables.scss and added the class ‘dark’ to the body element of my index.html.

Nothing changed and everything is still white. Is this a known issue?

2

Do you have a sample project to look at? Dark-mode should be taken care of in the latest v5 starters utilizing the media query preference

3

How can I provide you the project?
I just followed the tutorial on the website to create a project and afterwards I tried to implement the dark mode like described in the dark mode tutorial.

If I change another value in the variables.scss like the primary color the changes are applied to the app.

Are the variables in the tutorial up to date?

4

Make a project with the CLI, and then push it to github.

5

Hi @mhartington
I have the same issue, the Dark mode works fine in desktop browser by using the below code

export class DisplayModeService {

  constructor() { }

  toggleDisplayMode() {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    prefersDark.addEventListener('change', (mediaQuery) => this.toggleDarkTheme(mediaQuery.matches));
    this.toggleDarkTheme(prefersDark.matches);
  }

  // Add or remove the "dark" class based on if the media query matches
  private toggleDarkTheme(shouldAdd) {
    document.body.classList.toggle('dark', shouldAdd);
  }
}

AppComponent

initializeApp() {
    this.platform.ready().then(() => {
      this.displayMode.toggleDisplayMode();
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

but it’s not on the Android device, even after i have added the class='dark' explicitly.
I think there is some some tips before we push the project. :grin:

6

Can you please provide a sample project. We need something to debug.

1 Like
7

@mhartington please find the below Github repository:

8

@mhartington The dark mode works only when I change my display mode setting in Windows, also it’s not working on Android even if I set the settings to DarkTheme.

Thanks.

9

Ahh, so the example you have doesn’t do anything with the dark class you add to the body.
It relies on the @media (prefers-color-scheme: dark) setting only.

If you want both, you need to listen for the media query and the class list.

1 Like
10

@mhartington this is very confusing that the docs show to just add the dark class, but doesn’t mention that the media query comes standard, but you need to add the class to the css. Both should be included in the starter projects.

3 Likes
11

Mmm yeah, I’d agree. Could you open an issue on the ionic-docs repo? I’ll take a look in the coming days to revamp those.

2 Likes
12
3 Likes
13

@mhartington That’s right :sweat_smile: … Thanks for your help, it works now :+1:

1 Like
14

My project is working in windows dark mode toggle but not working at Android device. What changes i need to do?

1 Like
15

Most android devices do not support dark mode at the moment. You’ll need to check your android version and see if it support system wide dark mode settings first.

16

You will have to do this manually with the js option

17

Hey, thanks a lot for your support but i have searched the web and darkmode is not affecting my ionic android app , when i turn on darkmode on IOS it affects the prefers-color-scheme.

Is there any solution to allow prefers-color-scheme:dark work on android apps.

i tested this on android 10.

1 Like
18

What change we need to do? can you please share running code snippet.

19

Same issue for me. i can’t find solution yet. any help will be very appreciated.