離子原色dinamically改變

有沒有辦法讓一個單獨的主題，例如稱爲BlueTheme，在主題被激活時，我改變$顏色的主要，次要，危險等變量。或者是否必須手動更改應用這些顏色的類和位置？例如離子原色dinamically改變

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

謝謝！

來源

2017-08-02 Gustavo Fulton

以下是我從this Youtube video獲取的筆記，供我將來使用。

服務

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

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

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

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

主題/自定義主題暗。 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>

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

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

//內部$顏色（）;添加

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

HTML模板內

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

來源

2017-08-02 17:14:03 JGFMK

離子原色dinamically改變

回答

相關問題