mempool/frontend/src/app/services/theme.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { defaultMempoolFeeColors, contrastMempoolFeeColors } from '../app.constants';
import { StorageService } from './storage.service';

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  style: HTMLLinkElement;
  theme: string = 'default';
  themeChanged$: Subject<string> = new Subject();
  mempoolFeeColors: string[] = defaultMempoolFeeColors;

  constructor(
    private storageService: StorageService,
  ) {
    const theme = this.storageService.getValue('theme-preference') || 'default';
    this.apply(theme);
  }

  apply(theme) {
    this.theme = theme;
    if (theme !== 'default') {
      theme === 'contrast' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors;
      try {
        if (!this.style) {
          this.style = document.createElement('link');
          this.style.rel = 'stylesheet';
          this.style.href = `${theme}.css`;
          document.head.appendChild(this.style);
        } else {
          this.style.href = `${theme}.css`;
        }
      } catch (err) {
        console.log('failed to apply theme stylesheet: ', err);
      }
    } else {
      this.mempoolFeeColors = defaultMempoolFeeColors;
      if (this.style) {
        this.style.remove();
        this.style = null;
      }
    }
    this.storageService.setValue('theme-preference', theme);
    this.themeChanged$.next(this.theme);
  }
}