How to realize the function of Night Mode in Ionic3

This article shows you how to achieve the night mode function in Ionic3, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

1. Create a theme style

Create theme.light.scss and theme.dark.scss files under. / src/theme folder, which are used for setting daytime mode and night mode respectively.

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

These are my two theme styles, which readers can write on demand.

two。 Import variables.scss@import "theme.light"; @ import "theme.dark"; 3. Create provider

Terminal operation:

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; constructor () {this.theme = new BehaviorSubject (false);} setActiveTheme (theme) {this.theme.next (theme);} getActiveTheme () {return this.theme.asObservable ();}} 4. Create page

Terminal operation:

Ionic g page setting

Setting.html

Set personalization night mode

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 ('Night mode will fail after closing the application');} this.settingDataProvider.setActiveTheme (! this.theme);} presentToast (message: string) {let toast = this.toastCtrl.create ({message: message, duration: 2000}) Toast.present () .then (value = > {return value;});} 5. Apply a theme at the App entrance

App.html

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 ();}) }} the above content is how to implement the night mode function in Ionic3. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.