离子原色动态变化

Posted 2023-03-07

【中文标题】离子原色动态变化

【英文标题】：Ionic primary color dynamically change

【发布时间】：2018-01-10 00:37:19

【问题描述】：

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

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

谢谢！

【参考方案1】：

这是我从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;
   

主题/自定义主题-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

inside ion-header > ion-title 后的 ion-navbar

<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');
    
  

应用组件.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>

---

变量.scss

//里面$colors();添加

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

html模板内

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