Ionic Colors
In this section, we are going to learn about how Ionic makes the use of colors for different elements.
Ionic Color Classes
The Ionic framework contains a set of nine pre-defined color classes, which is used to change the color of many components. You can use these colors with your own styling. In Ionic, each color is a collection of multiple properties including shade and a tint. We can apply color to an Ionic component by using the color attribute. If you have not set any color to the required element, it sets the primary color by default.
We can see the default set of colors provided by Ionic framework in the following table.
| Colors | Description |
|---|---|
| Light | It is used for white color. |
| Positive | It is used for blue color. |
| Balanced | It is used for green color. |
| Stable | It is used for a light grey color. |
| Calm | It is used for a light blue color. |
| Energized | It is used for yellow color. |
| Assertive | It is used for red color. |
| Royal | It is used for violet color. |
| dark | It is used for black color. |
Adding Colors
We can add colors throughout the application by setting the color property on an Ionic component, or by styling with CSS.
If we want to add a new color, first define the CSS variables for all of the variations of the color at the root. For example, to add a new color called a favorite, we can define the following variables:
CSS file
Now, create a new class which uses these CSS variables. The class must be in the format of .ion-color-{COLOR} where {COLOR} is the name of the color to add:
After the class is added, it can be used on any Ionic component which supports the color property. For example, we can use the favorite color on an Ionic button as below.
HTML file
Ionic Color Usage
Ionic uses different classes for each element. For example, the button element has a button class, and header element has a bar class. Now, if we want to create a blue color button, we will use the button-primary class as follows.
We can also use the Ionic color class like any other CSS class. The below code helps us to understand the use of the color property.
When the above code executes, it changes the Show Action Sheet button in the blue color. We will get the following output.
