Changement dinamique de couleur primaire ionique

Question

Existe-t-il un moyen de créer un thème séparé, par exemple appelé BlueTheme, où je change les variables $ couleurs primaires, secondaires, de danger, etc. lorsque le thème est activé? Ou dois-je modifier manuellement les classes et les emplacements où ces couleurs sont appliquées? par exemple.

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

Merci!

Answer 1

Voici les notes que j'ai prises de this Youtube video, pour mon usage futur.

Service

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

thème/custom-thème sombre. 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

inside-tête ionique> ion-ion navbar après-titre

<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

// à l'intérieur des couleurs $(); ajouter

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

intérieur modèle html

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