Ionic Custom and Dynamic Theming

Welcome to the second tutorial in Ionic series. In the first tutorial we learnt how to setup Ionic and starting out first Project. In this Tutorial we will learn how to setup a Custom theme to your Application and Add a cool theme switching feature to your App.

 

Here is the Demo URL for Dynamic Theme changing:

http://techiedreams.com/demos/ionic-themes/

 

Download Sources at GitHub: 

https://github.com/chanusukarno/Ionic-Theming

 

1. Default Themes available:

Ionic by default provides you with different color themes[http://ionicframework.com/docs/components/#colors]. Every component you use with ionic is appended by the theme name.

Example:

1. Header bar has the following syntax with different themes:

<!-- positive theme -->

<divclass="bar bar-header bar-positive"> 
 <h1class="title">bar-positive</h1>
</div>

<!-- calm theme -->

<divclass="bar bar-header bar-positive"> 
 <h1class="title">bar-positive</h1>
</div>

 

2. Buttons with different themes:

<!-- positive theme -->

<buttonclass="button button-positive">
 button-positive
</button>

<!-- calm theme -->

<buttonclass="button button-calm">
 button-calm
</button>

 

2. How to customize a theme using SASS

 

Often we can go with the available themes, but if you are designing an App for a Brand, then you must use custom themes, here will discuss how to customize available themes:

Ionic uses SASS(a CSS Preprocessor), using sass you can define variables and reuse them across. Ionic defines all its themes colors as variables in one file called _varaibles.scss

 

Lets create a Sample Project called ‘IonicThemes’ to demonstrate the example, from terminal run:

ionic start IonicThemes sidemenu

 

Setup Sass:

Note: This step is very important without this ionic won’t find gulp dependencies to perform sass tasks.

cd IonicThemes

ionic setup sass

Run the App:

ionic serve

 

Open the project in Sublime or any preferable IDE.

Now follow these steps to override any of the themes[here in this example will override positive theme to our brand color]:

Step1: Open file: Project root -> scss -> ionic.app.scss

Step 2: Just above the last import, override the variables you want with the brand colors:

Note: This example used ‘stable’ for headers and ‘positive’ for buttons.

Final ionic.app.scss:

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// @override $positive
$positive: #62bdbc !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

 

If you are running the App from CLI using:

ionic serve

 , the gulp watch task will be watching for any changes in the files and it runs the ‘sass’ task and reloads the page. Thats it you now have a custom theme setup.

[hit ctrl+c or q to stop watching]

 

If in case you want to manually run gulp sass task, in terminal hit:

gulp sass

 

You can anytime revert the changes by commenting or removing the changes made in ‘ionic.app.scss’ file

 

3. Switch App themes Dynamically

In the above example the App is using two different color/themes, i would recommend to use one single color so that it will be easy when you are allowing user to switch themes dynamically.

So lets qucikly create a blank project and add the following template to it:

Step1: 

ionic start MyIonThemes blank

Step2: Replace existing <ion-pane></ion-pane> with:

<ion-pane>
    <ion-header-bar ng-class="'bar-' + appTheme">
      <h1 class="title">Ionic - Switch Themes</h1>
    </ion-header-bar>
    <ion-header-bar class="bar-subheader" ng-class="'bar-' + appTheme">
      <h1 class="title">Subheader</h1>
    </ion-header-bar>
    <ion-content class="padding">
      <ion-list>
        <button class="button" ng-class="'button-' + appTheme">button</button>
        <button class="button button-block button-outline" ng-class="'button-' + appTheme">
          Outlined Button
        </button>
        <button class="button button-block" ng-class="'button-' + appTheme">Block Button</button>
        <button class="button button-block button-clear" ng-class="'button-' + appTheme">Clear Button</button>
        <ion-item href="#" ng-class="'item-' + appTheme">Item</ion-item>
        <ion-toggle toggle-class="toggle-{{appTheme}}">Toggle</ion-toggle>
        <div class="item range" ng-class="'range-' + appTheme">
          <i class="icon ion-ios7-sunny-outline"></i>
          <input type="range" name="volume" min="0" max="100" value="33">
          <i class="icon ion-ios7-sunny"></i>
        </div>
        <a class="item" href="#">
          Badges
          <span class="badge" ng-class="'badge-' + appTheme">0</span>
        </a>
        <br />
        <br />

        <!-- Choose theme -->
        <div class="item item-divider">
          Choose a theme
        </div>
        <div class="list">
          <label class="item item-radio" ng-repeat="theme in themes">
            <input type="radio" name="group" ng-value="theme" ng-model="appTheme" ng-change="themeChange(theme)">
            <div class="item" ng-class="'item-' + theme">
              {{theme}}
            </div>
            <i class="radio-icon ion-checkmark"></i>
          </label>
        </div>

      </ion-list>
    </ion-content>
    <ion-footer-bar ng-class="'bar-' + appTheme">
      <h1 class="title">Footer</h1>
    </ion-footer-bar>
  </ion-pane>

In this step we added few Ionic components to demonstrate the example and also added a list to display different themes at the end.

One important thing here is where ever we have the theme name say ex: positive we replaced it with

ng-class

  with some expression:

ng-class=" 'bar-' + appTheme "

ng-class will evaluate the expression based on the value assigned to scope variable ‘appTheme‘ and it adds a class with evaluated expression.

We can also use {{ moustache }} for the same example: 

class="bar-{{appTheme}}"

 

Step 3: Now Add a controller to the Body and implement it as follows:

myModule.controller('mainCtrl', function ($scope, $location, $window) {

        $scope.themes = [
            'light',
            'stable',
            'positive',
            'calm',
            'balanced',
            'energized',
            'assertive',
            'royal',
            'dark'
        ];

        var selectedTheme = $window.localStorage.appTheme;
        if (selectedTheme) {
            $scope.appTheme = selectedTheme;
        } else {
            $scope.appTheme = 'positive';
        }

        $scope.themeChange = function (theme) {
            // save theme locally
            $window.localStorage.appTheme = theme;
            // reload
            $window.location = '';
        }

    });

Step 4: Run the App using: 

ionic serve

We have now setup a dynamic theme to our application. Play with it and share your view and post any questions in the comments.

 

 

Subscribe  &  Share    Thanks!

The post Ionic Custom and Dynamic Theming appeared first on TechieDreams.