Ionic3中如何實(shí)現(xiàn)夜間模式功能

本篇文章為大家展示了Ionic3中如何實(shí)現(xiàn)夜間模式功能，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

1. 創(chuàng)建主題樣式

在 ./src/theme 文件夾下創(chuàng)建 theme.light.scss、theme.dark.scss 2個(gè)文件，分別用于日間模式、夜間模式的設(shè)置。

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個(gè)主題樣式，讀者可以自己按需進(jìn)行編寫。

2. 導(dǎo)入 variables.scss

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

3. 創(chuàng)建 provider

終端運(yùn)行:

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. 創(chuàng)建 page

終端運(yùn)行:

ionic g page setting

setting.html

<ion-header>

  <ion-navbar>
    <ion-title>設(shè)置</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <ion-list>
    <ion-list-header>個(gè)性化設(shè)置</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('關(guān)閉應(yīng)用后夜間模式將失效');
    }
    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 入口處應(yīng)用主題

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();
    });
  }
}

上述內(nèi)容就是Ionic3中如何實(shí)現(xiàn)夜間模式功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。