Question

我在所有标签/导航视图中使用皇家颜色。我有一个设置选项卡，允许用户通过选择一个单选按钮来切换主题颜色。例如，如果用户选择黑暗主题，则所有选项卡颜色将切换为黑暗。我怎么能这样做？

<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>

在离子中切换主题颜色

1 个答案: