Ionic3学习笔记（十）实现夜间模式功能

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

目录

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. 效果

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