CODEWITHSUNDEEP
htmlangularionic-frameworksass
Jakub Szlaur
Jakub Szlaur

Reputation: 2132

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

Upvotes: 1

Views: 393

Answers (1)

Adrii
Adrii

Reputation: 1740

You forgot "--" before CSS properties name.

Try this :

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

Upvotes: 2

Related Questions