Dynamic Theming Ionic not work for model view and side bar

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


providers - settings.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/Rx';

export class SettingsProvider {

  private theme: BehaviorSubject<String>;

  constructor() {
    this.theme = new BehaviorSubject('dark-light');

  setActiveTheme(val) {

  getActiveTheme() {
    return this.theme.asObservable();


<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 ion-button full icon-left (click)="toggleAppThemes()" (click)="presentLoading()" style="background: #263447;color: white;">
    <ion-icon  name="bulb"></ion-icon>Dark


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams , LoadingController} from 'ionic-angular';
import {SettingsProvider} from "../../providers/settings/settings";

  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');

  toggleAppTheme() {


  toggleAppThemes() {



ion-menu  id="myMenu" [content]="content" side="right" persistent="true">

          <ion-col col-6>
            <div text-left  style="color: #000000; font-size: 2rem;">
          <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>

            <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-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-nav [root]="rootPage" #content swipeBackEnabled="false"  [class]="selectedTheme" ></ion-nav>

To solve the side menu, on line 1 of app.html add [class]="selectedTheme" inside the ion-menu tag

For example:
<ion-menu id="myMenu" [class]="selectedTheme" [content]="content" side="right" persistent="true">

As for the modal view, I’m still trying to figure that out for myself.

1 Like


1 Like

add your selectedThem to cssClass.
im set the selectedtheme in variable globe.
for Exmple in provider declare varaible yourTheme:any=“light-theme”;.
and when i toggleAppTheme i change this variable with the active theme

this.modal.create(“CustomeModal”, {param: “test”}, {
cssClass: provide.yourTheme

1 Like