DEV Community

Cover image for Ionic 6 Custom Color Variables
Chetan Rohilla
Chetan Rohilla

Posted on • Originally published at


Ionic 6 Custom Color Variables

Create custom color for your app’s UI. Change Theme or add custom color in Ionic 6 App. The fastest way to change the theme of Ionic app is to set a new value for primary, secondary, light, dark etc. Here below we will change the values of predefined ionic color variables and also create custom color variables in ionic.

Add Custom Color in Ionic 6

First visit ionic color generator, create or change colors of your choice then copy the :root object into your src/themes/variables.scss file as shown below.

:root {
    --ion-color-primary: #3880ff;
    --ion-color-primary-rgb: 56,128,255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255,255,255;
    --ion-color-primary-shade: #3171e0;
    --ion-color-primary-tint: #4c8dff;

    --ion-color-secondary: #5260ff;
    --ion-color-secondary-rgb: 82,96,255;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255,255,255;
    --ion-color-secondary-shade: #4854e0;
    --ion-color-secondary-tint: #6370ff;

    --ion-color-tertiary: #5260ff;
    --ion-color-tertiary-rgb: 82,96,255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255,255,255;
    --ion-color-tertiary-shade: #4854e0;
    --ion-color-tertiary-tint: #6370ff;

    --ion-color-success: #2dd36f;
    --ion-color-success-rgb: 45,211,111;
    --ion-color-success-contrast: #000000;
    --ion-color-success-contrast-rgb: 0,0,0;
    --ion-color-success-shade: #28ba62;
    --ion-color-success-tint: #42d77d;

    --ion-color-warning: #ffc409;
    --ion-color-warning-rgb: 255,196,9;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0,0,0;
    --ion-color-warning-shade: #e0ac08;
    --ion-color-warning-tint: #ffca22;

    --ion-color-danger: #eb445a;
    --ion-color-danger-rgb: 235,68,90;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255,255,255;
    --ion-color-danger-shade: #cf3c4f;
    --ion-color-danger-tint: #ed576b;

    --ion-color-medium: #8c97c5;
    --ion-color-medium-rgb: 140,151,197;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0,0,0;
    --ion-color-medium-shade: #7b85ad;
    --ion-color-medium-tint: #98a1cb;

    --ion-color-light: #f4f5f8;
    --ion-color-light-rgb: 244,245,248;
    --ion-color-light-contrast: #000000;
    --ion-color-light-contrast-rgb: 0,0,0;
    --ion-color-light-shade: #d7d8da;
    --ion-color-light-tint: #f5f6f9;

Enter fullscreen mode Exit fullscreen mode

If you want to create custom color variables like instagram color. Then in your variables.scss file add the code given below.

:root {
    --ion-color-instagram: #fd4c76;
    --ion-color-instagram-rgb: 253, 76, 118;
    --ion-color-instagram-contrast: #ffffff;
    --ion-color-instagram-contrast-rgb: 255, 255, 255;
    --ion-color-instagram-shade: #fa3462;
    --ion-color-instagram-tint: #d61845;

.ion-color-instagram {
  --ion-color-base: var(--ion-color-instagram) !important;
  --ion-color-base-rgb: var(--ion-color-instagram-rgb) !important;
  --ion-color-contrast: var(--ion-color-instagram-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-instagram-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-instagram-shade) !important;
  --ion-color-tint: var(--ion-color-instagram-tint) !important;
Enter fullscreen mode Exit fullscreen mode

Now, we can use ionic color variables in our app. For example, we can use like this

<ion-icon name="logo-twitter" color="secondary"></ion-icon>

<ion-item color="primary"></ion-item>

This is custom instagram color we created above.

<ion-icon name="logo-instagram" color="instagram"></ion-icon>

Please like share and give positive feedback to motivate me to write more.

For more tutorials visit my website.

Happy Coding:)

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!