गतिशील थीम Ionic- मॉडल दृश्य के लिए काम नहीं कर रहा

Question

इम मेरी विश्वविद्यालय परियोजना के अनुप्रयोग, थीम पृष्ठभूमि बदलाव के लिए इस https://devdactic.com/dynamic-theming-ionic/ इस्तेमाल किया काम नहीं कर रहा विषय विकल्प के लिए काम कर रहे हैं, लेकिन कुछ मुद्दे ihave, (theme.dark काम नहीं) आयोनिक Modals, अन्य पृष्ठों काम कर रहे हैं, कि इस मुद्दे को ठीक करने के लिए कैसे धन्यवाद

मेरी-कोड

प्रदाताओं - 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(); 
    } 
} 

पेज/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

इसकी क्योंकि आप के लिए सीएसएस लिखा नहीं किया है मॉडल।

मैं वे तुम्हें विषय के लिए अपने app पूछ देख सकते हैं,

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

तो यह ठीक काम करना चाहिए। यदि यह अभी भी काम नहीं कर रहा है जोड़ें: होस्ट/गहरी/ और इसे एक आकर्षण की तरह काम करना चाहिए।

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

Answer 2

आप setting.ts फ़ाइल alterate करने की कोशिश कर सकते हैं: से

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

को

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

मैं यह भी ध्यान रखें

एक "रों" के अंत में आपकी सेटिंग में toggleAppThemes() का दूसरा मौका, "एस" के साथ func n है ओटी मौजूदा ... तो कृपया toggleAppTheme()