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...