search

ionic-team / ionic-pwa-toolkit

Build lightning fast Progressive Web Apps with zero config and best practices built-in. Go from zero to production ready with Ionic and Stencil (Web Components).
MIT License
635 stars 74 forks source link

Defining New Colors - color='myNewDefinedColor' #34

Closed tonyawad88 closed 6 years ago

tonyawad88 commented 6 years ago

Hello,

This is more of a question, is there a way to extend the colors for the ionic components in this pwa/stencil project?

Note: myNewlyDefinedColor below instead of 'primary'

        <ion-header>
          <ion-toolbar color='myNewlyDefinedColor'>
            <ion-title>Ionic PWA Toolkit</ion-title>
          </ion-toolbar>
        </ion-header>

Thank you!

jgw96 commented 6 years ago

Hello! Thanks for opening an issue with us! As this seems like more of a support question I will urge that you ask this question on our or on our slack channel. Thanks for using Stencil!

mgatto commented 6 years ago

The solution to this actually took me several hours to discover. It really should be added to the docs. The only way I could make it work was to do the following in a .scss file:

:root {
  --ion-color-primary: $color-mount-saint-anne;
  --ion-toolbar-md-background-color: $color-beach-glass;
  --ion-toolbar-background-color: $color-beach-glass;
  --ion-item-md-border-color-rgb: $color-succulent-peach-rgb;
  --ion-item-border-color-rgb: $color-succulent-peach-rgb;
  --ion-toolbar-md-text-color: $color-floral-white;
  --ion-toolbar-text-color: $color-floral-white;
}