Merge pull request #502 from Klath123/fix/heatmap-race-conditon

Refactor ThemeService and fix duplicate Material theme generation

Author: wurstbrot

src/app/pages/circular-heatmap/circular-heatmap.component.ts

@@ -76,8 +76,6 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    const savedTheme: string = this.themeService.getTheme() || 'light';
-    this.themeService.setTheme(savedTheme); // sets .light-theme or .dark-theme
     requestAnimationFrame(() => {
       // Now the DOM has the correct class and CSS vars are live
       console.log(`${perfNow()}s: ngOnInit: Initial theme:`, this.theme);

src/app/service/theme.service.ts

@@ -1,26 +1,42 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
+export type AppTheme = 'light' | 'dark';
+
 @Injectable({ providedIn: 'root' })
 export class ThemeService {
-  private themeSubject = new BehaviorSubject<string>('light');
+  private readonly STORAGE_KEY = 'theme';
+  private readonly defaultTheme: AppTheme = 'light';
+
+  private themeSubject = new BehaviorSubject<AppTheme>(this.defaultTheme);
   public readonly theme$ = this.themeSubject.asObservable();
 
   constructor() {}
 
   initTheme(): void {
-    const saved = localStorage.getItem('theme') || 'light';
-    this.setTheme(saved);
+    const stored = localStorage.getItem(this.STORAGE_KEY);
+    const theme: AppTheme = stored === 'dark' ? 'dark' : this.defaultTheme;
+    this.setTheme(theme);
+  }
+
+  setTheme(theme: AppTheme): void {
+    if (this.themeSubject.value === theme) return;
+    this.applyTheme(theme);
   }
 
-  setTheme(theme: string): void {
+  private applyTheme(theme: AppTheme): void {
     document.body.classList.remove('light-theme', 'dark-theme');
     document.body.classList.add(`${theme}-theme`);
-    localStorage.setItem('theme', theme);
+
+    localStorage.setItem(this.STORAGE_KEY, theme);
     this.themeSubject.next(theme);
   }
 
-  getTheme(): string {
+  getTheme(): AppTheme {
     return this.themeSubject.value;
   }
+
+  toggleTheme(): void {
+    this.setTheme(this.themeSubject.value === 'light' ? 'dark' : 'light');
+  }
 }

src/custom-theme.scss

@@ -205,7 +205,6 @@ body.dark-theme {
   }
 }
 
-@include mat.all-component-themes($DSOMM-dark-theme);
 
 .button-container {
   display: flex;