theme service

thmeservice.ts

import { Injectable } from '@angular/core';
import { blueGrace } from './themes';
const themeKey = 'app:theme';

export const themeStore = {
  'Blue Grace': blueGrace,
  'Default': null
};



@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  activeThemeId: string;
  isApplyingTheme: boolean = false; // do some animation with this variable
  themeIds: string[] = Object.keys(themeStore); // for selection

  constructor() {
    // bring back from localstorage 
    if (window.localStorage) {
      this.activeThemeId = localStorage.getItem(themeKey);
    }
  }

  setTheme(name: string) {
    // precondition
    if (this.activeThemeId === name) { return; }

    // do some animation for 3 seconds
    this.isApplyingTheme = true;
    setTimeout(() => {
      this.isApplyingTheme = false;
    }, 3000);

    // set active theme
    this.activeThemeId = name;
    // save it in localstorage
    if (window.localStorage) {
      localStorage.setItem(themeKey, name);
    }
  }

  getClass(key: string) {
    if (!themesStore[this.activeThemeId]) { 
      return undefined; 
    }
    let activeTheme = themeStore[this.activeThemeId];
    return activeTheme[key] // either undefined or the class name
  }
}