Programmatically switch themes in Ionic Framework

Question

Programmatically switch themes in Ionic Framework

I posted this on the Ionic forum, but I never seem to have luck on their forums, so I thought I'd try here.

I'd like to have options for a "dark" and "light" theme that a user can choose in their settings. What's the best way to go about that? Can I programmatically switch between ionic themes, like dark and stable?

Thanks in advance.

ionic-framework

Answer 1

You can you ng-style to pass a css options object to an element. This will toggle font color on the element. Following this pattern you would have dark and light theme objects that you toggle between.

<div ng-style="style" class="item">
  This is a basic Card.
  <button ng-click="toggle()">Toggle</button>
</div>

And in your controller

.controller('AppCtrl', function($scope) {
    $scope.style = {
      color: '#000'
    };

    $scope.toggle = function() {
      $scope.style.color = ($scope.style.color === '#000' ? '#fff' : '#000');
    };
});

Demo

Answer 2

Here is a simple example where you want to change the color of your header dynamically:

<ion-header-bar ng-class="'bar-' + appTheme">
      <h1 class="title">Ionic - Switch Themes</h1>
</ion-header-bar>

In your controller:

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 = '';
    }

Live demo and full example @: http://techiedreams.com/ionic-custom-and-dynamic-theming/