Im used this https://devdactic.com/dynamic-theming-ionic/ for my university project app ,Theme background change are working but I have some issue,(theme.dark not work) Ionic Modals for not working theme option , other pages are working , How to fix that issue
Thanks
my-code
providers - settings.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/Rx';
@Injectable()
export class SettingsProvider {
private theme: BehaviorSubject<String>;
constructor() {
this.theme = new BehaviorSubject('dark-light');
}
setActiveTheme(val) {
this.theme.next(val);
}
getActiveTheme() {
return this.theme.asObservable();
}
}
page/setting.html
<ion-content padding>
<p text-center>Theme settings</p>
<button ion-button full icon-left (click)="toggleAppTheme()" (click)="presentLoading()" style="background: lightgrey;color: #263447;">
<ion-icon name="sunny"></ion-icon>Light
</button>
<button ion-button full icon-left (click)="toggleAppThemes()" (click)="presentLoading()" style="background: #263447;color: white;">
<ion-icon name="bulb"></ion-icon>Dark
</button>
</ion-content>
setting.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams , LoadingController} from 'ionic-angular';
import {SettingsProvider} from "../../providers/settings/settings";
@IonicPage()
@Component({
selector: 'page-settings',
templateUrl: 'settings.html',
})
export class SettingsPage {
selectedTheme: String;
constructor(public navCtrl: NavController, private settings: SettingsProvider,public loadingCtrl: LoadingController) {
this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
}
ionViewDidLoad() {
console.log('ionViewDidLoad SettingsPage');
}
to
toggleAppTheme() {
this.settings.setActiveTheme('light-theme');
}
toggleAppThemes() {
this.settings.setActiveTheme('dark-theme');
}
}
app.html
ion-menu id="myMenu" [content]="content" side="right" persistent="true">
<ion-header>
<ion-toolbar>
<ion-grid>
<ion-row>
<ion-col col-6>
<div text-left style="color: #000000; font-size: 2rem;">
Car-Rent</div>
</ion-col>
<ion-col >
<div class="t-setting" style="text-align: right;font-size: 2rem; color:#a57958;" ><ion-icon ios="ios-settings-outline" md="md-settings"></ion-icon></div>
</ion-col>
<ion-col>
<div class="t-logout" style="font-size: 2rem; color:#a57958; text-indent: 0rem; text-align: right;" ><ion-icon ios="ios-log-out" md="md-log-out"></ion-icon></div>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list >
<button menuClose ion-item *ngFor="let p of pages"[class.activeHighlight]="checkActive(p)" (click)="openPage(p)" > <ion-icon [name]="p.icon" item-left></ion-icon>{{p.title}}</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" [class]="selectedTheme" ></ion-nav>