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 i…


This content originally appeared on DEV Community and was authored by Chetan Rohilla

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;

}

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;
}

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.

Thanks:)
Happy Coding:)


This content originally appeared on DEV Community and was authored by Chetan Rohilla


Print Share Comment Cite Upload Translate Updates
APA

Chetan Rohilla | Sciencx (2022-05-09T07:25:06+00:00) Ionic 6 Custom Color Variables. Retrieved from https://www.scien.cx/2022/05/09/ionic-6-custom-color-variables/

MLA
" » Ionic 6 Custom Color Variables." Chetan Rohilla | Sciencx - Monday May 9, 2022, https://www.scien.cx/2022/05/09/ionic-6-custom-color-variables/
HARVARD
Chetan Rohilla | Sciencx Monday May 9, 2022 » Ionic 6 Custom Color Variables., viewed ,<https://www.scien.cx/2022/05/09/ionic-6-custom-color-variables/>
VANCOUVER
Chetan Rohilla | Sciencx - » Ionic 6 Custom Color Variables. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/05/09/ionic-6-custom-color-variables/
CHICAGO
" » Ionic 6 Custom Color Variables." Chetan Rohilla | Sciencx - Accessed . https://www.scien.cx/2022/05/09/ionic-6-custom-color-variables/
IEEE
" » Ionic 6 Custom Color Variables." Chetan Rohilla | Sciencx [Online]. Available: https://www.scien.cx/2022/05/09/ionic-6-custom-color-variables/. [Accessed: ]
rf:citation
» Ionic 6 Custom Color Variables | Chetan Rohilla | Sciencx | https://www.scien.cx/2022/05/09/ionic-6-custom-color-variables/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts