在Ionic上动态更改大小，但也会更改主题

Question

我正在尝试更改离子型应用程序的字体大小，但需要更改整个应用程序的颜色（主题）。

为更好地理解问题，请参阅以下链接视频： https://drive.google.com/open?id=1iifRarhNu8uGBUU8kkSe5T17RyBDG4N8

字体HTMl文件

    <ion-content padding>
      <ion-label></ion-label>
      <ion-item>
          <ion-label  >Font Size</ion-label>
          <ion-select [(ngModel)]="Font">
            <ion-option value="L">Large</ion-option>
            <ion-option value="S">Small</ion-option>

          </ion-select>
        </ion-item>
        <button ion-button full (click)="toggleAppTheme1()">Apply</button>

FOONT.TS文件看起来像

      constructor(public navCtrl: NavController, public navParams: NavParams, public settings: SettingsProvider) 
      {
        this.settings.getActiveFont().subscribe(val => this.selectedFont = val);

      }

      toggleAppTheme1()
      { 
        debugger;
        if (this.Font=='L'){ this.settings.setActiveFont('Large-Font');}

        if(this.Font=='S'){ this.settings.setActiveFont('Small-Font');}

提供者setting.ts包含类似

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

    @Injectable()
    export class SettingsProvider {

    private theme: BehaviorSubject<String>;

    private font: BehaviorSubject<String>;

      constructor() {
    this.theme= new BehaviorSubject('Dark-theme');
    //this.font = new BehaviorSubject('Large-Font');

    this.font= new BehaviorSubject('Small-Font');

    // this.theme= new BehaviorSubject('Small-Font');
        console.log('Hello SettingsProvider Provider');
      }

      setActiveTheme(val){

      debugger
        this.theme.next(val);
      }

      getActiveTheme(){

      return this.theme.asObservable();
      }

      setActiveFont(val)
      {
        debugger;
        //this.theme.next(val);
        this.font.next(val);
      }
      getActiveFont(){
        //return this.theme.asObservable();
        return this.font.asObservable();
      }

    }

我已经创建了主题。通过scss进行更改动态更改外观， large.scss

.Large-Font{
ion-content{
    font-size: 18px;
}

}

Small.scss

.Large-Font{
ion-content{
    font-size: 18px;
}

}

Dark.theme.scss

.Dark-theme{
ion-content{
    background-color: #090f2f;
    color: #fff;
}
.card-header {
    //color: #000000;
    color: #fff;
}
.card {
     background-color: #090f2f; // black
    //background-color: #ffffff; // black
    box-shadow: none;

  }

.toolbar-title{
     color:rgb(255, 255, 255);
   // color:rgb(24, 23, 23);
}
.header .toolbar-background{
  border-color: #ff0fff;
// border-color: #305f38fd;
    background-color: #090f2f;
}
.footer .toolbar-background{
    border-color: #ff15ff;
    background-color: #090f2f;
}

}

light theme.scss

.light-theme{
ion-content{
    background-color: #ffff;
}

.login {
    background: #ffff;
        }

 .card-header-ios {
            color: ffff;
    }

.toolbar-background{
        background-color: #ffff;
}

.card {
    background-color: #e5e7ee; // black
    box-shadow: none;

  }

}

medium.scss

                .Medium-theme{
                ion-content{
                    background-color: rgb(255, 255, 255);
                    // color: rgb(0, 0, 0);
                }

                .login {
                    //background: rgba(248, 248, 248, 0.795);
                    background: rgb(255, 255, 255);
                        }

                .card-header-ios {
                            color: ffff;
                    }

                .toolbar-background{
                        background-color: #014f52;
                }

                .card {
                    background-color: #fafafa; // black
                    box-shadow: none;

                }

            }

在app.comopent .ts

 this.initializeApp();



this.settings.getActiveFont().subscribe(val => this.selectedFont = val);

this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
// used for an example of ngFor and navigation

在APP.html

中

<ion-nav [root]="rootPage" #content swipeBackEnabled="false" [class]="selectedFont" [class]="selectedTheme"></ion-nav>

对于theme.html

   <ion-label>Dark/Light</ion-label>
   <ion-item>
       <ion-label  >Color </ion-label>
       <ion-select [(ngModel)]="Color ">
         <!-- <ion-option selected disabled value="D">Dark</ion-option> -->
         <ion-option disabled="disabled" value="D">Dark</ion-option>
         <ion-option value="L">light</ion-option>
         <ion-option value="p">Pale</ion-option>

         <!-- <ion-option value="M">medium</ion-option> -->

         <!-- <ion-option value="R">Rich</ion-option> -->
       </ion-select>

     </ion-item>
      <button ion-button full (click)="toggleAppTheme1()">Change</button>

颜色。ts

    Color:string;
  Font:string;
  selectedTheme:String;
  selectedFont: String;

  constructor(public navCtrl: NavController, public navParams: NavParams, private settings:SettingsProvider ) 


  {
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
    // this.settings.getActiveFont().subscribe(val => this.selectedFont = val);
    this.settings.getActiveFont().subscribe(val => this.selectedFont = val);
  }





      toggleAppTheme1()
      { 



        if (this.Color=='D'){ this.settings.setActiveTheme('Dark-theme');}

        else if(this.Color=='L'){ this.settings.setActiveTheme('Light-theme');}

        else if(this.Color=='M'){ this.settings.setActiveTheme('Medium-theme');} 

        else if(this.Color=='p'){ this.settings.setActiveTheme('Plain-theme');}
        else if(this.Color=='R'){ this.settings.setActiveTheme('Rich-theme');}