Ionic – Dark Mode/Theme

Table of Contents

Sources

Starter-Code

				
					//app.component.ts
constructor(){
    // Use matchMedia to check the user preference
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    toggleDarkTheme(prefersDark.matches);

    try {
      // Chrome & Firefox & EDGE
      // Listen for changes to the prefers-color-scheme media query
      console.log("addEventListener")
      prefersDark.addEventListener('change', (mediaQuery) => {
        toggleDarkTheme(mediaQuery.matches);
      });
    } catch (e1) {
      try {
        // Safari
        console.log("SafariTRASH")
        prefersDark.addListener((mediaQuery) => {
          toggleDarkTheme(mediaQuery.matches);
        });
      } catch (e2) {
        console.error(e2);
      }
    }

    // Add or remove the "dark" class based on if the media query matches
    function toggleDarkTheme(shouldAdd) {
      document.body.classList.toggle('dark', shouldAdd);
    }
  }
				
			
				
					// variables.scss
// remove // @media (prefers-color-scheme: dark) { }
// add .dark to your elements

body.dark {
    ...
}

.ios body.dark {
    ...
}

.md body.dark {
    ...
}

Leave a Comment