ダイナミックテーマ設定Ionic-は、モデルビューのために働いていない

Question

Imは私の大学のプロジェクトのアプリ、テーマの背景の変更のため、このhttps://devdactic.com/dynamic-theming-ionic/を使用し、作業が、いくつかの問題IHAVEされている（theme.darkに動作しない）イオンModals、 settings.ts

- ページがその問題に おかげ

私のコード

プロバイダを修正する方法、作業しています

ページ/ 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

そのあなたがのCSSを書いていないので、モデル。

私は、彼らが自分のアプリのテーマにあなたを求めて見ることができるように、

.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/と追加してください。

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

Answer 2

あなたはsetting.tsファイルalterateしようとすることができます：私は最後に "の" も注意

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

に

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

から

をあなたの設定でtoggleAppThemes()の2番目の発生、 "s"を伴う関数はn既存の...だからtoggleAppTheme()