本文为原创文章，转载请标明出处

目录

1. 创建主题样式
2. 导入 variables.scss
3. 创建 provider
4. 创建 page
5. 在 App 入口处应用主题
6. 效果图

1. 创建主题样式

在 ./src/theme 文件夹下创建 theme.light.scss、theme.dark.scss 2个文件，分别用于日间模式、夜间模式的设置。

theme.light.scss:

.light-theme {   ion-content {     background-color: #f4f4f4;   }    .item {     background-color: #fff;   }    ion-textarea {     background-color: #fff;   }    .toolbar-background {     background-color: #f8f8f8;   }    .tab-button {     background-color: #f8f8f8;   } }  

theme.dark.scss:

.dark-theme {   ion-content {     background-color: #555;   }    .item {     background-color: #555;   }    ion-textarea {     background-color: #666;   }    .toolbar-background {     background-color: #444;   }    .tab-button {     background-color: #444;   } }  

这是我的2个主题样式，读者可以自己按需进行编写。

2. 导入 variables.scss

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

3. 创建 provider

终端运行:

ionic g provider setting-data 

setting-data.ts:

import {Injectable} from '@angular/core';  import {BehaviorSubject} from "rxjs/BehaviorSubject";  @Injectable() export class SettingDataProvider {    // true: dark-theme   // false: light-theme   theme: BehaviorSubject<boolean>;    constructor() {     this.theme = new BehaviorSubject(false);   }    setActiveTheme(theme) {     this.theme.next(theme);   }    getActiveTheme() {     return this.theme.asObservable();   }  } 

4. 创建 page

终端运行:

ionic g page setting 

setting.html

<ion-header>    <ion-navbar>     <ion-title>设置</ion-title>   </ion-navbar>  </ion-header>   <ion-content>    <ion-list>     <ion-list-header>个性化设置</ion-list-header>     <ion-item>       <ion-label>夜间模式</ion-label>       <ion-toggle checked="{{theme}}" (ionChange)="toggleTheme()"></ion-toggle>     </ion-item>   </ion-list>  </ion-content> 

setting.ts

import {Component} from '@angular/core'; import {IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';  import {SettingDataProvider} from "../../providers/setting-data/setting-data";  @IonicPage() @Component({   selector: 'page-setting',   templateUrl: 'setting.html', }) export class SettingPage {    theme: boolean;    constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public settingDataProvider: SettingDataProvider) {     this.getActiveTheme();   }    getActiveTheme() {     this.settingDataProvider.getActiveTheme().subscribe(theme => {       this.theme = theme;     });   }    toggleTheme() {     if (!this.theme) {       this.presentToast('关闭应用后夜间模式将失效');     }     this.settingDataProvider.setActiveTheme(!this.theme);   }    presentToast(message: string) {     let toast = this.toastCtrl.create({message: message, duration: 2000});     toast.present().then(value => {       return value;     });   }  } 

5. 在 App 入口处应用主题

app.html

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

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 {SettingDataProvider} from "../providers/setting-data/setting-data";  @Component({   templateUrl: 'app.html' })  export class MyApp {   rootPage: any = 'TabsPage';    theme: string;    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, settingDataProvider: SettingDataProvider) {     settingDataProvider.getActiveTheme().subscribe(theme => {       if (theme) {         this.theme = 'dark-theme';       } else {         this.theme = 'light-theme';       }     });      platform.ready().then(() => {       statusBar.styleDefault();       splashScreen.hide();     });   } } 

6. 效果

如有不当之处，请予指正，谢谢～