离子原色动态变化 [英] Ionic primary color dynamically change

问题描述

有没有办法制作一个单独的主题，例如称为BlueTheme的主题，当我激活该主题时，我可以在其中更改$ colors主要，次要，危险等变量.还是我必须手动更改应用这些颜色的类和位置?例如

Is there a way to make a separate theme, for example called BlueTheme, where I change the $colors primary, secondary, danger etc.. variables when the theme is activated? Or do I have to manually change the classes and locations where these colors are applied? e.g.

.BlueTheme {
//Whenever this theme is activated, I want to change the primary, secondary colors etc
     $colors {
         primary: different color,
         secondary: another color, etc...
     }
}

谢谢！

推荐答案

以下是我从此YouTube视频，供我自己将来使用.

Here are notes I took from this Youtube video, for my own future use.

服务

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

@Injectable
export class

     SettingsProvider {
      private theme: BehaviorSubject<String>;

      constructor (
        this.theme = new BehaviorSubject('dark-theme');
       }
       setActiveTheme(val) {
         this.theme.next(val)
       }

       getActiveTheme()  {
          return this.theme.asObservable();
       }

}

/theme/variables.scss

/theme/variables.scss

// immediately after
@import "ionic.globals";

@import "custom-theme-light;
@import "custom-theme-dark";

/theme/custom-theme-light.scss

/theme/custom-theme-light.scss

.light-theme {
   ion-content {
     background-color: fff;
     color:000;
   }
   .header .toolbar-title {
    color: #000;
   }
   .header .tooblar-background {
     border-color: #EFF;
     background-color: #fff;
   }
   .tab-button {
     background-color: #fff;
   }
}

theme/custom-theme-dark.scss

theme/custom-theme-dark.scss

.dark-theme {
   ion-content {
     background-color: #000;
     color: #FFF;
   }
   .header .toolbar-title {
    color: #FFF;
   }
   .header .tooblar-background {
     border-color: #100;
     background-color: #000;
   }
   .tab-button {
     background-color: #000;
   }
}

home.html

home.html

内部离子头>离子标题后的离子导航栏

inside ion-header > ion-navbar after ion-title

<ion-buttons end>
  <button ion-button icon-only (click)="toggleAppTheme()">
    <ion-icon name="bulb"></ion-icon>
  </button>
</ion-buttons>

home.ts

export HomePage {
  selectedTheme: string;
  constructor(settings: SettingsProvider) {
     this.settings.getTheme().subscribe(theme => this.selectedTheme = theme);
   }

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

}

app-component.ts

app-component.ts

export class MyApp {
  //after rootPage
  selecteTheme: string

  constructor( ..., private settings: Settings)
    this.settings.getTheme().subscribe(theme => this.selectedTheme = theme);
    // above platform.ready

app.html

<ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>

---

variables.scss

---

variables.scss

//在$ colors内部();添加

//inside $colors (); add

dark-theme-primary:
light-theme-primary;

内部html模板

[color]="selectedTheme + '-primary'"

这篇关于离子原色动态变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！