angular – Ionic-3如何动态改变离子主题

使用Ionic 4和CSS 4,这是一项非常简单的任务.请参阅this article.

service.ts

import { Injectable,Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { DomController } from '@ionic/angular';

interface Theme {
  name: string;
  styles: ThemeStyle[];
}

interface ThemeStyle {
  themeVariable: string;
  value: string;
}

@Injectable({
  providedIn: 'root'
})
export class ThemeSwitcherService {

  private themes: Theme[] = [];
  private currentTheme: number = 0;

  constructor(private domCtrl: DomController,@Inject(DOCUMENT) private document) { 

    this.themes = [
      {
        name: 'day',styles: [
          { themeVariable: '--ion-color-primary',value: '#f8383a'},{ themeVariable: '--ion-color-primary-rgb',value: '248,56,58'},{ themeVariable: '--ion-color-primary-contrast',value: '#ffffff'},{ themeVariable: '--ion-color-primary-contrast-rgb',value: '255,255,255'},{ themeVariable: '--ion-color-primary-shade',value: '#da3133'},{ themeVariable: '--ion-color-primary-tint',value: '#f94c4e'},{ themeVariable: '--ion-item-ios-background-color',{ themeVariable: '--ion-item-md-background-color',{ themeVariable: '--ion-tabbar-background-color',value: '#fff'},{ themeVariable: '--ion-tabbar-ios-text-color-active',value: '#000000'},{ themeVariable: '--ion-tabbar-md-text-color-active',{ themeVariable: '--ion-background-color',value: '#f94c4e'}
        ]
      },{
        name: 'night',value: '#222428'},value: '34,34,34'},value: '#1e2023'},value: '#383a3e'},value: '#717171'},value: '#383838'}
        ]
      }
    ]

  }

  cycleTheme(): void {

    if(this.themes.length > this.currentTheme + 1){
      this.currentTheme++;
    } else {
      this.currentTheme = 0;
    }

    this.setTheme(this.themes[this.currentTheme].name);

  }

  setTheme(name): void {

    let theme = this.themes.find(theme => theme.name === name);

    this.domCtrl.write(() => {

      theme.styles.forEach(style => {
        document.documentElement.style.setProperty(style.themeVariable,style.value);
      });

    });

  }

}