What is the SCSS equivalent of color=”primary” in Ionic 4?


I am using this HTML syntax that produces the toolbar to be in my primary color and the text inside the toolbar to be in contrast with that color:

  <ion-toolbar color"primary">
      GreenWalls Aplikace

enter image description here

My application will have many page’s and I don’t want to set all of the toolbar color’s manually – instead I want to set this color inside global.scss file and apply it automatically and globally. This is what I have tried and didn’t work so far (from Ionic theming tutorial):

ion-toolbar {
  background: var(--ion-color-primary);
  color: var(--ion-color-primary-contrast);

Result from the code above:

enter image description here

How can I achieve the same output in SCSS as using in HTML color"primary" in Ionic (using Angular framework)?


You forgot “–” before CSS properties name.

Try this :

ion-toolbar {
    --background: var(--ion-color-primary);
    --color: var(--ion-color-primary-contrast);

Answered By – Adrii SAULNIER

Leave a Comment