From 5211d1737c7d65110a0f2d91bfa6055bfc1a8f19 Mon Sep 17 00:00:00 2001
From: keshav lath <keshav.lath3232788@gmail.com>
Date: Thu, 26 Feb 2026 18:03:36 +0530
Subject: [PATCH] Fix the theme settings

---
 .../circular-heatmap.component.ts             |  2 --
 src/app/service/theme.service.ts              | 28 +++++++++++++++----
 src/custom-theme.scss                         |  1 -
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/app/pages/circular-heatmap/circular-heatmap.component.ts b/src/app/pages/circular-heatmap/circular-heatmap.component.ts
index dfce06181..f871f4493 100644
--- a/src/app/pages/circular-heatmap/circular-heatmap.component.ts
+++ b/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);
diff --git a/src/app/service/theme.service.ts b/src/app/service/theme.service.ts
index 810b76539..9e21a5a51 100644
--- a/src/app/service/theme.service.ts
+++ b/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');
+  }
 }
diff --git a/src/custom-theme.scss b/src/custom-theme.scss
index 4b14e8f00..2fb45da74 100644
--- a/src/custom-theme.scss
+++ b/src/custom-theme.scss
@@ -205,7 +205,6 @@ body.dark-theme {
   }
 }
 
-@include mat.all-component-themes($DSOMM-dark-theme);
 
 .button-container {
   display: flex;