Ionic 更换主题风格方案

需求

最近涉及到的一个需求是——用户可更换页面风格，因此，查了一些资料后，写一下Ionic更换主题方案

方案

动态改变根标签类名，比如亮色风格时，class="light"，比如暗色风格时，class="dark"

步骤

1.在 src/theme 文件夹下，新建两种不同风格

light.theme.scss

dark.theme.scss

2.在切换事件发生时，动态改变类名，因此，我们需要先写一个服务，用于初始化值、接收传入的新值、返回值

① 执行命令，创建setting服务
ionic g provider settings

② setting.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {BehaviorSubject} from "rxjs/Rx";

@Injectable()
export class SettingsProvider {

  private theme:BehaviorSubject<String>;

  constructor() {
    //默认初始值
    this.theme = new BehaviorSubject('dark-theme');
  }

  setActiveTheme(val){
    //新值
    this.theme.next(val);
  }

  getActiveTheme() {
    //观察
    return this.theme.asObservable();
  }
}

BehaviorSubject：继承自subject，发射observable数据

3.在页面中注入服务

home.html

<ion-content padding>
  <p text-center>I shine at night and glow at day.</p>
  <button ion-button full icon-left (click)="toggleAppTheme()">
    <ion-icon  name="bulb"></ion-icon>Toggle Theme
  </button>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {SettingsProvider} from "../../providers/settings/settings";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  selectedTheme:String;

  constructor(public navCtrl: NavController,
              private settings:SettingsProvider) {
    //订阅可观察者对象
    this.settings.getActiveTheme().subscribe(val=> this.selectedTheme = val);
  }

  toggleAppTheme() {
    //切换事件发生时
    if (this.selectedTheme === 'dark-theme') {
      this.settings.setActiveTheme('light-theme');
    } else {
      this.settings.setActiveTheme('dark-theme');
    }
  }

}

4.同时，在根目录文件中注入服务，从而动态更换根标签类名

app.html

<ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>
<!--绑定class名-->

app.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import {SettingsProvider} from "../providers/settings/settings";
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;
  selectedTheme: String;

  constructor(platform: Platform,
              statusBar: StatusBar,
              splashScreen: SplashScreen,
              private settings:SettingsProvider) {
    this.settings.getActiveTheme().subscribe(val=> this.selectedTheme = val)
  }
}

5.效果图

参考：
dynamic-theming