ionic tutorial - ionic themes | Ionic - Colors - ionic - ionic development - ionic 2 - ionic framework
- Before we start with actual elements available in Ionic framework, let's have a little understanding on how Ionic makes use of colors for different elements.
- Ionic framework gives us set of nine predefined color classes.
- You can use these colors or you can override it with your own styling.
- Following list shows default set of 9 colors provided by Ionic.
- We will use these colors for styling different Ionic elements in our next tutorials. For now you can check all the colors below:
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Ionic Color Classes
| 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 tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Ionic Color Usage
- Ionic makes use of different classes for each element.
- For example a header element will have bar class and a button will have button class.
- To simplify the usage, we use different colors by prefixing element class in a color name.
- For example to create a blue color header we will use a bar-calm as follows:
<div class="bar bar-header bar-calm">
...
</div>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Similarly to create a grey color button we will use button-stable class as follows.
<div class="button button-stable">
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Similarly to create a grey color button we will use button-stable class as follows.
<div class="button button-stable">
...
</div>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- You can also use Ionic color class like any other CSS class.
- We will style two paragraphs below with balanced (green) and energized (yellow) color.
<p class="balanced"> wikitechy 1...</p>
<p class="energized"> wikitechy 2...</p>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- This will produce following result:
- You will see the detail in coming chapters when we will create different elements using different classes.
Customizing Colors with CSS
- When you want to change some of the Ionic default colors using CSS, you can do it by editing lib/css/ionic.css file.
- In some cases this approach isn't very productive because every element (header, button, footer...) use its own classes for styling.
- So if you want to change color of the "light" class to orange, you would need to search through all of the elements that use this class and change it.
- This is useful when you want to change color of a single element, but not very practical for changing color of all elements because it would use too much time.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Customizing colors using SASS
- SASS provides easier way to change color for all elements at once. If you want to use SASS open your project in command window and type:
C:\Users\Username\Desktop\tutorialApp> ionic setup sass
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- This will set up SASS for your project. Now you can change default colors if you open scss/ionic.app.scss file and type the following before this line @import "www/lib/ionic/scss/ionic";. We will change balanced color to dark blue, and energized color to orange. Two paragraphs we used above are now dark blue and orange.
$balanced: #000066 !default;
$energized: #FFA500 !default;
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Now if you use following example:
<p class="balanced">wikitechy 1...</p>
<p class="energized">wikitechy 2...</p>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- This will produce following result:
- All of the Ionic elements that are using these classes will change to dark blue and orange.
- Take into consideration that you don't need to use Ionic default colors classes. You can always style elements the way you want.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Important Note
- www/css/style.css file will be removed from the header of the index.htmlafter you install SASS. You will need to link it manually if you still want to use it. Open your index.html and add the following code inside the header.
<link href="css/style.css" rel="stylesheet">