Программно переключайте темы в Ionic Framework

Я разместил это на форуме Ionic, но мне никогда не повезло на их форумах, поэтому я подумал, что попробую здесь.

Я хотел бы иметь опции для темной и светлой темы, которые пользователь может выбрать в своих настройках. Какой лучший способ сделать это? Могу ли я программно переключаться между ионными темами, например темными и стабильными?

Ответы

Ответ 1

Вы можете ng-style передать объект опций css в элемент. Это приведет к переключению цвета шрифта на элемент. Следуя этой схеме, у вас будут темные и светлые объекты темы, которые вы переключаете между ними.

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

И в вашем контроллере

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

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

Демо

Ответ 2

Вот простой пример, где вы хотите динамически менять цвет своего заголовка:

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

В вашем контроллере:

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

Живая демонстрация и полный пример @: http://techiedreams.com/ionic-custom-and-dynamic-theming/