dark

Ionic – new ion-color

Table of Contents

Starter-Code

To get started with some custom colors in an ionic 5 app. To use them like the normal ionic colors fast and easy without any issues.

				
					// theme/custom-ion-colors.scss

@import "mixins/ion-color";
:root {
  @include ion-color("digital") {
    --ion-color-digital: #a5c0c2;
    --ion-color-digital-rgb: 165, 192, 194;
    --ion-color-digital-contrast: #000000;
    --ion-color-digital-contrast-rgb: 0, 0, 0;
    --ion-color-digital-shade: #91a9ab;
    --ion-color-digital-tint: #aec6c8;
  }
}
				
			
				
					// theme/mixins/ion-color.scss

@mixin ion-color($color) {
  @content;

  .ion-color-#{$color} {
    --ion-color-base: var(--ion-color-#{$color}) !important;
    --ion-color-base-rgb: var(--ion-color-#{$color}-rgb) !important;
    --ion-color-contrast: var(--ion-color-#{$color}-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-#{$color}-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-#{$color}-shade) !important;
    --ion-color-tint: var(--ion-color-#{$color}-tint) !important;
  }
}

				
			
				
					// global.scss

@import "theme/custom-ion-colors.scss";
				
			
				
					// your-page.scss

--background: var(--ion-color-digital);


// your-page.html

<ion-header>
  <ion-toolbar color="digital">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Test Color
    </ion-title>
  </ion-toolbar>
</ion-header>

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 {
    ...
}