Dynamic Theming Ionic - not working to view the model

Question

I used this https://devdactic.com/dynamic-theming-ionic/ for my project project project at the university, changing the background theme works, but I have a problem (theme . Dark not work ) Ionic Modals for a non-working theme, other pages work how to fix this problem 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> 

Answer 1

Because you did not write css for the Model .

As I can see, they are asking you the theme of your application

 .dark-theme { ion-content { background-color: #090f2f; color: #fff; } .toolbar-title { color: #fff; } .header .toolbar-background { border-color: #ff0fff; background-color: #090f2f; } // Define model customization scss here ion-modal ion-content{ background-color:#000; } } 

So this should work fine. if it doesn’t work yet, add : host / deep / and it should work like a charm.

 :host /deep/ ion-modal ion-content{ background-color:#000; } 

Answer 2

Could you try changing the settings.ts file:

from

 toggleAppTheme() { this.settings.setActiveTheme('light-theme'); } toggleAppThemes() { this.settings.setActiveTheme('dark-theme'); } 

to

 toggleAppTheme() { if (this.selectedTheme === 'dark-theme') { this.settings.setActiveTheme('light-theme'); } else { this.settings.setActiveTheme('dark-theme'); } 

I also mark " s " at the end of the second appearance of toggleAppThemes() in your setup, func with "s" does not exist ... so please change to toggleAppTheme()