Ionic 3：动态主题切换

初始化项目

ionic start myApp blank
cd blank
ionic g provider settings

新建主题文件

在 src/theme 文件夹下新建以下两个主题文件：

theme.light.scss：

.light-theme {
  ion-content {
    background-color: #fff;
  }
  .toolbar-background {
    background-color: #fff;
  }
}

theme.dark.scss：

.dark-theme {
  ion-content {
    background-color: #090f2f;
    color: #fff;
  }
  .toolbar-title {
    color: #fff;
  }
  .header .toolbar-background {
    border-color: #ff0fff;
    background-color: #090f2f;
  }
}

在 src/theme/variables.scss 文件中添加导入：

@import "theme.light";
@import "theme.dark";

Settings provider

src/providers/settings/settings.ts：

import {
  Injectable
} from '@angular/core';
import {
  BehaviorSubject
} from 'rxjs/Rx';


@Injectable()
export class SettingsProvider {
  theme: BehaviorSubject < string > ;
  constructor() {
    this.theme = new BehaviorSubject('dark-theme');
  }
  setActiveTheme(val) {
    this.theme.next(val);
  }

  getActiveTheme() {
    return this.theme.asObservable();
  }

}

切换主题

src/pages/home/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');
    }
  }
}

src/pages/home/home.html：

<ion-header>
  <ion-navbar>
    <ion-title>Night & Day</ion-title>
  </ion-navbar>
</ion-header>

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

将选定的主题应用到根组件上

src/app/app.component.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, settings: SettingsProvider) {
    settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

src/app/app.html：

<ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>