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

Paul Stelzer
Sep 12, 2018 · 4 min read
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:

Changing the standard colors in Ionic 4

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>

I will show you how you can create a color named “gold” (after the same schema you can add even more colors and use them in your components).

Step 1: Create your color

I recommend you to use the Ionic Color Generator (https://beta.ionicframework.com/docs/theming/color-generator). For example change the primary color. I want a gold color, so I change it to #ffd700. Now copy the code from below. Search and replace “primary” with gold and copy only this lines. So you should have the following:

--ion-color-gold: #ffd700;--ion-color-gold-rgb: 255, 215, 0;--ion-color-gold-contrast: #000000;--ion-color-gold-contrast-rgb: 0, 0, 0;--ion-color-gold-shade: #e0bd00;--ion-color-gold-tint: #ffdb1a;

Step 2: Add this to your scss file

Now it’s up to you where you add the new color. For example you can add it to your variables.scss. Be aware that you paste it inside :root . Another method could be creating a colors.scss, add :rootand paste it between. Afterwards add @import "colors"; to your global.scss file.

Step 3: Define the color for your components

Last step is to create the color class. This is important because by adding color=”gold” this will become the class “ion-color-gold” and so we have to create a style for it. So we add the following to our colors.scss or our global.scss

.ion-color-gold {--ion-color-base: var(--ion-color-gold) !important;--ion-color-base-rgb: var(--ion-color-gold-rgb) !important;--ion-color-contrast: var(--ion-color-gold-contrast) !important;--ion-color-contrast-rgb: var(--ion-color-gold-contrast-rgb) !important;--ion-color-shade: var(--ion-color-gold-shade) !important;--ion-color-tint: var(--ion-color-gold-tint) !important;}

All in all this is our code:

And so

<ion-button color="gold">We now have a gold button :)</ion-button>

will become:

Adding new colors in Ionic 4 is not difficult and by the way, you only need the .ion-color-gold and the the colors directly without CSS varaiables, but I think that is the nicer one ;)


Bonus: Make it easier with SCSS

Step 3 can be made more easier when adding more colors by using SCSS. We just add a scss variable, e.g. $customColors. Here you add all your custom colors. Afterwards make a loop with each and replace the hard-coded color with your scss variable color. And so it looks afterwards:

$customColors: ('white', 'info', 'gold', 'silver', 'bronze', 'correct', 'wrong', 'gray');@each $color in $customColors {.ion-color-#{$color} {--ion-color-base: var(--ion-color-#{$color}) !important;--ion-color-base-rgb: var(--ion-color-#{$color}-rgb) !important;--ion-color-contrast: var(--ion-color-#{$color}-contrast) !important;--ion-color-contrast-rgb: var(--ion-color-#{$color}-contrast-rgb) !important;--ion-color-shade: var(--ion-color-#{$color}-shade) !important;--ion-color-tint: var(--ion-color-#{$color}-tint) !important;}}

Now you only need to add your colors described in step 1 and just need to add the name to your scss variable.

Paul Stelzer

Written by

Angular and Ionic Developer / SEO / WordPress — Always looking for new challenges!