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>

Leave a Comment