theme-switcher.ts

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

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

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

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

  private themes: Theme[] = [
    {
      name: 'themeName',
      styles: [
        { themeVariable: '--ion-color-primary', value: '#00b255' },
        { themeVariable: '--ion-color-primary-rgb', value: '0,178,85' },
        { themeVariable: '--ion-color-primary-contrast', value: '#ffffff' },
        { themeVariable: '--ion-color-primary-contrast-rgb', value: '255,255,255' },
        { themeVariable: '--ion-color-primary-shade', value: '#009d4b' },
        { themeVariable: '--ion-color-primary-tint', value: '#1aba66' },
        { themeVariable: '--ion-color-secondary', value: '#145976' },
        { themeVariable: '--ion-color-secondary-rgb', value: '20,89,118' },
        { themeVariable: '--ion-color-secondary-contrast', value: '#ffffff' },
        { themeVariable: '--ion-color-secondary-contrast-rgb', value: '255,255,255' },
        { themeVariable: '--ion-color-secondary-shade', value: '#124e68' },
        { themeVariable: '--ion-color-secondary-tint', value: '#2c6a84' },
        { themeVariable: '--system-logo-default', value: 'logo_path' },
      ]
    },
  ];
  // tslint:disable-next-line:no-inferrable-types
  private currentTheme: number = 0;

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

  setTheme(name: string): void {
    // tslint:disable-next-line:prefer-const
    let theme = this.themes.find(t => t.name === name);

    this.domCtrl.write( () => {
      const fav = '/assets/icon/favicon-' + name + '.png';
      console.log(document.querySelector('link[rel="icon"]').setAttribute('href', fav));
      theme.styles.forEach( style => {
        document.documentElement.style.setProperty(style.themeVariable, style.value);
      });
    });
  }

  getColor(name: string): ThemeStyle {
    return this.themes.find( t => t.name === name).styles.find( s => s.themeVariable === '--ion-color-primary');
  }
}