Working with Ionic SCSS

This section covers how you can customize Ionic's SCSS variables and mixins.

The code we are going to write will assume that you have the basics needed to work with SCSS.

Note

If you are new to SCSS, I recommend following this guide http://sass-lang.com/guide.

Basic swatch

Earlier, we have seen the basic color swatch provided by Ionic: Positive, Assertive, Calm, and so on. They are all pre-defined and set up by the Ionic team. What if you want to change the color for components using the class positive? Let's take a look at how this is done.

Referring to the example14 folder, open www/index.html and update the class on the ion-nav-bar directive from bar-stable to bar-positive. Next, open www/templates/tabs.html and remove the class named tabs-color-active-positive on the ion-tabs directive, and add tabs-positive.

Note

At the time of writing, the tabs template is shipped with the stable style for the ion-nav-bar directive.

To see the output, run this command:

ionic serve

The...