Dynamic Theming Ionic- không hoạt động cho chế độ xem kiểu

Question

Im sử dụng ứng dụng dự án đại học này, thay đổi nền chủ đề đang hoạt động nhưng có một số vấn đề, (theme.dark không hoạt động) Ionic Modals cho tùy chọn chủ đề không hoạt động trang đang làm việc, Làm thế nào để khắc phục vấn đề đó Cảm ơn

tôi mã

nhà cung cấp - 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(); 
    } 
} 

trang/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

của nó bởi vì bạn chưa viết css cho Kiểu máy.

Như tôi đã có thể nhìn thấy họ yêu cầu bạn chủ đề ứng dụng của bạn,

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

Vì vậy, nó sẽ làm việc tốt. nếu nó vẫn không hoạt động, thêm : máy chủ/sâu/ và nó sẽ hoạt động như một nét duyên dáng.

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

Answer 2

Bạn có thể thử để alterate tập tin setting.ts:

từ

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

Tôi cũng lưu ý một "s" ở phần cuối của sự xuất hiện thứ hai của toggleAppThemes() trong cài đặt của bạn, func với "s" là n ot hiện tại ... vì vậy hãy thay đổi thành toggleAppTheme()