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

0

Issue

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-header>
  <ion-toolbar color="primary">
    <ion-title>
      GreenWalls Aplikace
    </ion-title>
  </ion-toolbar>
</ion-header>

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)?

Solution

You forgot "–" before CSS properties name.

Try this :

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

Answered By – Adrien SAULNIER

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More