Building a swatch

In order to understand the preceding process a bit better, we will build a theme of our own, overriding variables and classes. We will scaffold a side menu app, and then change its default look and feel.

To scaffold a new side menu app run this:

ionic start -a "Example 15" -i app.example.fifteen example15 sidemenu

Next, using the cd command, go to the example15 folder and run this:

ionic setup sass

This will download and set up the SCSS dependencies for your project. Open ionic.app.scss. The idea here is not to change any markup or add new classes, but rather to modify the appropriate variables to reflect our new theme.

Note

This is not the only way in which you can theme your application. You can modify your markup, add appropriate classes that reflect your brand (for example, button-mybrand or bar-mybrand), and then create variables and classes appropriately in SCSS.

We will be theming the side menu app in shades of teal. The first thing we will do is modify the $stable variable...