Question

我将这个https://devdactic.com/dynamic-theming-ionic/用于我的大学项目应用程序，主题背景更改正在运行，但我有一些问题，（ theme.dark无效）Ionic 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

因为您还没有为模型编写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文件：

这

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()时还注意到“ s ”，带有“s”的func不存在...所以请更改到toggleAppTheme()

Answer 3

这就是诀窍

将所选主题设置为模态的cssClass。
在全局变量中设置活动主题->>

例如。在提供程序中声明一个变量->> Theme：any =“ light-theme”;

当我们切换AppTheme时，我们需要使用活动主题更改此变量

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

很感谢您的上述回答，我是否也可以为Popovers更改它？ Link to the html code for reference, If you see the yellow-theme does not get added to the popover div's

动态主题离子 - 不适用于模型视图

3 个答案: