Ionic 4: How to add more colors and use them as color in buttons and more?

Add more colors to Ionic 4 expect the standard ones

How can I add more colors in Ionic 4 and use them as color in different components like the Button, Item and so on?

If you work with Ionic 4 the way how you add colors has changed. Ionic 4 uses CSS variables (a nice way if you ask me).

9 default colors in Ionic 4

Ionic has 9 default colors: Primary, secondary, tertiary, success, warning, danger, dark, medium and light. And the best: Ionic brings a Color Generator so you can easily change this default colors: https://beta.ionicframework.com/docs/theming/color-generator. Just edit the colors there and afterward import it into your variables.scssin src/themefolder. And your colors have been changed:

The code looks like this:

<ion-button color="primary">Primary</ion-button>
<ion-button class="activated" color="primary">Primary.activated</ion-button>

I want more colors :)

But what if you need more than 9 colors? No problem! You can add your own colors. And at the end you can do something like that:

<ion-button color="gold">Gold</ion-button>