How to Write Themeable Mobile Apps with Ionic

Ionic is a super heroic framework for writing hybrid mobile apps. I am in love with Ionic from the first day I came to know it. It is super easy and flexible. Ionic provides a number of color schemes for creating the app. Followig image shows the color schemes provided by Ionic:

These colors can be applied to various Ionic components like header, footer, buttons etc. You can add the colors in Ionic compenents by adding the corresponding CSS class. For example in case of button we can write:

<button class="button button-light">
  button-light
</button>

Here button-light is the color scheme for button. You can change it to other scheme like button-positive.
But out mobile apps may contain many HTML templates with multiple HTML components. So hard-coding the color scheme in these componenents is not agood idea. What if the client says that he don’t like the positive color scheme and need energized scheme throughout the app? In such scenarios you may have to manually search for all places in your code where you have added the particular class.

I have a better idea here. What if we make the color scheme an angular variable? See:

angular.module('myApp', [])
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {

    'use strict';

    $scope.theme = {
        name: 'positive',
        header: {
            name: 'positive',
            button: {
                name: 'positive'
            }
        },
        sidebar: {
            header: {
                name: 'calm',
                button: {
                    name: 'calm'
                }
            }
        },
        showPadding: false
    };
}]);

Just create a $scope variable in the root controller of your Ionic application. Now in the all the templates, you can add color scheme like:

1. Nav-bar:
<ion-nav-bar class="bar-{{theme.header.name}} nav-title-slide-ios7">
    <ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
</ion-nav-bar>

2. Tabs:
<ion-tabs class="tabs-icon-top tabs-{{theme.name}}">
</ion-tabs>

3. Buttons:
<button class="button button-{{theme.name}}">
    <i class="icon ion-share"></i>Share
</button>

Now you just need to update the color scheme on root contoller on the angular app and your whole application will have a new theme!
You can see the in the $scope.theme object I have created separate variables for header, sidebar and buttons. You can make it more granular to control the minute details in your app. I have made the Ionic padding configurable using showPadding. You can add it in ion-content as:

<ion-content padding="theme.showPadding">
</ion-content>

You can try adding more and more items in your theme object to make it more configurable.