Ionic Colors

Ionic Colors

Before we start with the actual elements available in the Ionic frame, let's understand a little bit how Ionic uses colors for different elements.

Ionic Color Classes

Ionic framework is a set of nine predefined color classes, which are used to change the color of many elements. You can use this to override it with your styling. Each color is a set of multiple properties, which include tint and shade, used throughout the ionic.

The color can be applied to an ion element to change the default colors using the color property. If there is no set of colors on the button, then by default, it uses the primary color.

The given below table shows the default sets of nine color provided by the ionic framework.

Class Name	Color	Description
Positive		It is used to be for blue color
Balanced		It is used to be for the green color
Assertive		It is used to be for the red color
Dark		It is used to be for black color
Energized		It is used to be for the yellow color
Light		It is used to be for white color
Royal		It is used to be for violet color
Stable		It is used to be for light grey color
Calm		It is used to be for light blue color

Ionic Color Usage

Ionic makes use of several classes for each component. For example, a button has a button class, and a header element has a bar class. Now, if you want to create a light blue button, you'll use the primary button class as follows.

 My Collections
 
 

Like any other CSS class, we can also use the ionic color class. The given below code helps us to understand the use of the color property.

 Collection
 

When you execute the above code, it changes the collection button in the light blue color. The given below screenshot shows the output.

Adding colors

Colors can be added for use during an application by setting the color property in an ion component or design using CSS.

If you want to add a new color, firstly, define the CSS variables for all the changes of the color at the root. For example, to add a new color favorite, you can define the following variables:

CSS File

:root {
 --ion-color-favorite: #2059c9;
 --ion-color-favorite-rgb: 32, 89, 201;
 --ion-color-favorite-contrast: #0a0a0a;
 --ion-color-favorite-contrast-rgb: 10, 10, 10;
 --ion-color-favorite-shade: #6bb6db;
 --ion-color-favorite-tint: #75a8e6;
 } 

By using these CSS variables you can create a new class. The class must be written in the format of .ion-color-{COLOR} where {COLOR} is the name of the color which you want to add:

.ion-color-favorite {
 --ion-color-base: var(--ion-color-favorite);
 --ion-color-base-rgb: var(--ion-color-favorite-rgb);
 --ion-color-contrast: var(--ion-color-favorite-contrast);
 --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
 --ion-color-shade: var(--ion-color-favorite-shade);
 --ion-color-tint: var(--ion-color-favorite-tint);
 } 

After adding the class, the color can be used on any ion element that supports the color attribute. Below is an example of using the favorite color on the Ionic button.

Favorite

The given screenshot shows the output of the following Syntax.