Ionic 6 Custom Color Variables
Tags: ionic, themes, beginners, typescript
Published: 2022-05-09 07:25:06

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](https://ionicframework.com/docs/theming/color-generator), create or change colors of your choice then copy the :root object into your src/themes/variables.scss file as shown below.

```scss
: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.

```scss
: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

&lt;ion-icon name=&quot;logo-twitter&quot; color=&quot;secondary&quot;&gt;&lt;/ion-icon&gt;

&lt;ion-item color=&quot;primary&quot;&gt;&lt;/ion-item&gt;

This is custom instagram color we created above.

&lt;ion-icon name=&quot;logo-instagram&quot; color=&quot;instagram&quot;&gt;&lt;/ion-icon&gt;

---

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

For more [tutorials visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)