Ionic - Colors

Ionic framework gives us a set of nine predefined color classes.

Ionic Color Classes

The following table shows the default set of nine colors provided by Ionic. This tutorial we will learn about colors for styling different Ionic elements in this tutorial. Let's check all the colors as shown below
Class Description Result
light To be used for white color  
stable To be used for light grey color  
positive To be used for blue color  
calm To be used for light blue color  
balanced To be used for green color  
energized To be used for yellow color  
assertive To be used for red color  
royal To be used for violet color  
dark To be used for black color  

Ionic Color Usage

Ionic Color Usage different classes for each element.Suppose a header element will have bar class and a button will have a button class. For example, to create a green color header, we will use a bar-calm as follows
<div class = "bar bar-header bar-calm">
Same as create a yellow color button, we will use button-stable class as follows.
<div class = "button button-stable">
You can also use Ionic color class like any other CSS class. We will now style two paragraphs with a green and an yellow color.
<p class = "green">Paragraph 1...</p>
<p class = "yellow">Paragraph 2...</p>

Customizing Colors with CSS

When you want to change some of the Ionic default colors using CSS, you can do it by editing the lib/css/ionic.css file. this approach is not very productive because every element (header, button, footer...) uses its own classes for styling.if you want to change the color of the "light" class to orange, you would need to search through all the elements that use this class and change it.

Customizing colors using SASS

SASS (which is the short form of – Software as a Service) provides an easier way to change the color for all the elements at once.
C:\Users\Username\Desktop\tutorialApp> ionic setup sass
But you can change default colors by opening the scss/ionic.app.scss file and then typing in the following code before this line – @import "www/lib/ionic/scss/ionic";
$balanced: #000066 !default;
$energized: #FFA500 !default;
Now, if you use the following example
<p class = "green">Paragraph 1...</p>
<p class = "yellow">Paragraph 2...</p>

Important Note

The www/css/style.css file will be removed from the header of the index.html after you install SASS.
<link href = "css/style.css" rel = "stylesheet">