在离子中切换主题颜色

Question

我的所有标签 /nav-view 都使用皇家颜色。我有一个设置选项卡，所有用户都可以通过选择其中一个单选按钮来切换主题颜色。例如，如果用户选择深色主题，则所有选项卡颜色都将切换为深色。我该怎么做？

<ion-view view-title="Setting">

<ion-content >

  <h3 class="background-color:royal; padding">App Color</h3>
   <ion-list>
     <ion-radio class="royal"name="group" value="b1">
     Purple
     <i class="radio-icon ion-checkmark"></i>
   </ion-radio>
    <ion-radio class="dark" name="group" value="b2">
      Dark
       <i class="radio-icon ion-checkmark"></i>
     </ion-radio>
     <ion-radio class="calm" name="group" value="b3">
       Light
 <i class="radio-icon ion-checkmark"></i>
     </ion-radio>
   </ion-list>
      </ion-content>
  </ion-view>

您的帮助将不胜感激。

Answer 1

将选中的主题保存在本地存储中，使用ng-class动态应用样式

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

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