After reading this informative article, you can implement a dynamic theming functionality in your Ionic app. With this demo, it is possible to dynamically change styles and show/hide specific parts of the view based on the selected theme.
1) Setting Up Themes
In the src/theme directory, create two new files: theme.light.scss and theme.dark.scss:
// theme.light.scss
// -----------------
.light-theme {
ion-content {
background-color: #fff;
}
.toolbar-background {
background-color: #fff;
}
}
And
// 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;
}
}
Add the following lines to your src/theme/variables.scss file:
@import "theme.light";
@import "theme.dark";
2) Implementing a Provider
Develop a SettingsProvider (
src/providers/settings/settings.ts
) to manage theme changes:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/Rx';
@Injectable()
export class SettingsProvider {
private theme: BehaviorSubject<String>;
constructor() {
this.theme = new BehaviorSubject('dark-theme');
}
setActiveTheme(val) {
this.theme.next(val);
}
getActiveTheme() {
return this.theme.asObservable();
}
}
Include the provider in the app.module.ts file:
@NgModule({
declarations: [
// ...
],
imports: [
// ...
],
bootstrap: [IonicApp],
entryComponents: [
// ...
],
providers: [
// ...
SettingsProvider
]
})
export class AppModule { }
3) Updating the AppComponent
Add the following code to your src/app/app.component.ts file:
import { SettingsProvider } from './../providers/settings/settings';
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';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
selectedTheme: String;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private settings: SettingsProvider) {
this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
and in the view (src/app/app.html):
<ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>
4) Changing the Theme
To switch between themes, utilize the SettingsProvider as shown below:
import { SettingsProvider } from './../../providers/settings/settings';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@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');
}
}
}
Update the view with:
<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>