Add Custom Color in Ionic 6

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>

Add Custom Color in Ionic 6

Add Custom Color in Ionic 6

Recommended