Javatpoint Logo
Javatpoint Logo

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.

Ionic Colors
Next TopicIonic Buttons

Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA