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:

Ioninc-colors
Ioninc-colors

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.

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

5 thoughts on “How to Write Themeable Mobile Apps with Ionic

  1. Very nice idea, I've also considered doing something like this in my app. Two suggestions:

    – For performance I'd use one-time binding {{::…}}, so:

    tabs-{{::theme.name}}

    Otherwise you end up creating a large number of watchers.

    – Another approach would be to use SASS:

    either overriding the built-in styles or (better) use your own CSS class names which you can redefine.

    Then you don't incur any runtime overhead but on the other hand you can't switch themes at runtime.

  2. This comments is a bit late, but i have a very specific problems.
    What if you had already create your app and then wan't in the app change the color dynamically ?
    How do you parameter this one without predefine different themes and css so it can changed in the app?

    1. @FREDRIK, This strategy needs to be followed from the beginning of app development and it may be difficult to incorporate in pre-built apps. However it is not very difficult to do. You just need to add dynamic classes to your HTML containers using angular js and this is easy to do with help of angular.

  3. hihi… if i have a div and i need the background of the div to be ionic "positive" color, how can i change it?

Leave a Reply

Your email address will not be published. Required fields are marked *

1 × two =