Ionic 6 Custom Color Variables

Create customized coloration on your app’s UI. Change Theme or add customized coloration in Ionic 6 App. The quickest technique to change the theme of Ionic app is to set a brand new worth for major, secondary, mild, darkish and many others. Right here under we are going to change the values of predefined ionic coloration variables and in addition create customized coloration variables in ionic.



Add Customized Colour in Ionic 6

First go to ionic color generator, create or change colours of your alternative then copy the :root object into your src/themes/variables.scss file as proven under.

: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 wish to create customized coloration variables like instagram coloration. Then in your variables.scss file add the code given under.

: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) !necessary;
  --ion-color-base-rgb: var(--ion-color-instagram-rgb) !necessary;
  --ion-color-contrast: var(--ion-color-instagram-contrast) !necessary;
  --ion-color-contrast-rgb: var(--ion-color-instagram-contrast-rgb) !necessary;
  --ion-color-shade: var(--ion-color-instagram-shade) !necessary;
  --ion-color-tint: var(--ion-color-instagram-tint) !necessary;
}
Enter fullscreen mode

Exit fullscreen mode

Now, we will use ionic coloration variables in our app. For instance, we will use like this

<ion-icon title=”logo-twitter” coloration=”secondary”></ion-icon>

<ion-item coloration=”major”></ion-item>

That is customized instagram coloration we created above.

<ion-icon title=”logo-instagram” coloration=”instagram”></ion-icon>


Please like share and provides optimistic suggestions to inspire me to write down extra.

For extra tutorials visit my website.

Thanks:)
Joyful Coding:)

Add a Comment

Your email address will not be published. Required fields are marked *