Advertisements

Add Custom Color in Ionic 6

Advertisements

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>


Recommended

List of Ionic UI Components

Create ActionSheet in Ionic 3

Ionic 5 E-Commerce Template

How to add animations in ionic application?

For more Ionic Tutorials visit Ionic page.

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedInYouTube.

Comments are closed.