Angular 离子原色的动态变化
有没有一种方法可以创建一个单独的主题,例如BlueTheme,在这里我更改$colors primary、secondary、danger等。。激活主题时的变量?或者我必须手动更改应用这些颜色的类别和位置吗?e、 gAngular 离子原色的动态变化,angular,ionic-framework,sass,ionic2,themes,Angular,Ionic Framework,Sass,Ionic2,Themes,有没有一种方法可以创建一个单独的主题,例如BlueTheme,在这里我更改$colors primary、secondary、danger等。。激活主题时的变量?或者我必须手动更改应用这些颜色的类别和位置吗?e、 g .BlueTheme { //Whenever this theme is activated, I want to change the primary, secondary colors etc $colors { primary: differen
.BlueTheme {
//Whenever this theme is activated, I want to change the primary, secondary colors etc
$colors {
primary: different color,
secondary: another color, etc...
}
}
谢谢 以下是我的笔记,供我将来使用 服务
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/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
.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
内部离子标题>离子标题后的离子导航栏
<ion-buttons end>
<button ion-button icon-only (click)="toggleAppTheme()">
<ion-icon name="bulb"></ion-icon>
</button>
</ion-buttons>
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>
内部html模板
[color]="selectedTheme + '-primary'"
<ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>
dark-theme-primary:
light-theme-primary;
[color]="selectedTheme + '-primary'"