merged @vbakke's commit and hope to have fixed the theming, all working via side b utton. Will merge PR and then update to DSOMM before contributing.

Author: aguero-tech

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ThemeService } from './service/theme.service';
 
 @Component({
   selector: 'app-root',
@@ -9,6 +10,10 @@ export class AppComponent implements OnInit {
   title = 'DSOMM';
   menuIsOpen: boolean = true;
 
+  constructor(private themeService: ThemeService) {
+    this.themeService.initTheme();
+  }
+
   ngOnInit(): void {
     let menuState: string | null = localStorage.getItem('state.menuIsOpen');
     if (menuState === 'false') {

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

@@ -15,6 +15,7 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../modal-message/modal-message.component';
+import { ThemeService } from '../../service/theme.service';
 
 export interface activitySchema {
   uuid: string;
@@ -83,28 +84,53 @@ export class CircularHeatmapComponent implements OnInit {
   constructor(
     private yaml: ymlService,
     private router: Router,
+    private themeService: ThemeService,
     public modal: ModalMessageComponent
   ) {
     this.showOverlay = false;
     this.showFilters = true;
     this.theme = 'light';
+    this.theme = this.themeService.getTheme();
+
     this.theme_colors = this.themes[this.theme];
   }
 
   ngOnInit(): void {
-    console.log(`${this.perfNow()}s: ngOnInit`);
-    this.theme = localStorage.getItem('theme') || 'light';
-    this.theme_colors = this.themes[this.theme];
+    const savedTheme = 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
+      const css = getComputedStyle(document.body);
+      this.theme_colors = {
+        background: css.getPropertyValue('--heatmap-background').trim(),
+        filled: css.getPropertyValue('--heatmap-filled').trim(),
+        disabled: css.getPropertyValue('--heatmap-disabled').trim(),
+        cursor: css.getPropertyValue('--heatmap-cursor').trim(),
+        stroke: css.getPropertyValue('--heatmap-stroke').trim(),
+      };
 
-    // Ensure that Levels and Teams load before MaturityData
-    // using promises, since ngOnInit does not support async/await
-    this.LoadMaturityLevels()
-      .then(() => this.LoadTeamsFromMetaYaml())
-      .then(() => this.LoadMaturityDataFromGeneratedYaml())
-      .then(() => {
-        console.log(`${this.perfNow()}s: set filters: ${this.chips?.length}`);
-        this.matChipsArray = this.chips.toArray();
-      });
+      this.LoadMaturityLevels()
+        .then(() => this.LoadTeamsFromMetaYaml())
+        .then(() => this.LoadMaturityDataFromGeneratedYaml())
+        .then(() => {
+          this.matChipsArray = this.chips.toArray();
+        });
+    });
+
+    // Reactively handle theme changes (if user toggles later)
+    this.themeService.theme$.subscribe((theme: string) => {
+      const css = getComputedStyle(document.body);
+      this.theme_colors = {
+        background: css.getPropertyValue('--heatmap-background').trim(),
+        filled: css.getPropertyValue('--heatmap-filled').trim(),
+        disabled: css.getPropertyValue('--heatmap-disabled').trim(),
+        cursor: css.getPropertyValue('--heatmap-cursor').trim(),
+        stroke: css.getPropertyValue('--heatmap-stroke').trim(),
+      };
+
+      this.reColorHeatmap(); // repaint segments with new theme
+    });
   }
 
   @ViewChildren(MatChip) chips!: QueryList<MatChip>;
@@ -569,7 +595,7 @@ export class CircularHeatmapComponent implements OnInit {
               .startAngle(sa)
               .endAngle(ea)
           )
-          .attr('stroke', '#252525')
+          .attr('stroke', _self.theme_colors['stroke'])
           .attr('fill', function (d) {
             return color(accessor(d));
           });

src/app/component/sidenav-buttons/sidenav-buttons.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ThemeService } from '../../service/theme.service';
 
 @Component({
   selector: 'app-sidenav-buttons',
@@ -36,18 +37,20 @@ export class SidenavButtonsComponent implements OnInit {
 
   isNightMode = false;
 
-  constructor() {}
+  constructor(private themeService: ThemeService) {}
 
   ngOnInit(): void {
     const themePref = localStorage.getItem('theme');
-    this.isNightMode = themePref === 'night';
+    this.isNightMode = themePref === 'dark';
     this.applyTheme();
   }
 
   toggleTheme(): void {
+    console.log('[toggleTheme] Triggered');
+
     this.isNightMode = !this.isNightMode;
-    this.applyTheme();
-    localStorage.setItem('theme', this.isNightMode ? 'night' : 'light');
+    const newTheme = this.isNightMode ? 'dark' : 'light';
+    this.themeService.setTheme(newTheme);
   }
 
   private applyTheme(): void {

src/app/service/theme.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+  private themeSubject = new BehaviorSubject<string>('light');
+  public readonly theme$ = this.themeSubject.asObservable();
+
+  constructor() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    this.setTheme(savedTheme);
+  }
+
+  initTheme(): void {
+    const saved = localStorage.getItem('theme') || 'light';
+    this.setTheme(saved);
+  }
+
+  setTheme(theme: string): void {
+    document.body.classList.remove('light-theme', 'dark-theme');
+    document.body.classList.add(`${theme}-theme`);
+
+    // Force this before other reads
+    requestAnimationFrame(() => {
+      this.themeSubject.next(theme);
+      localStorage.setItem('theme', theme);
+    });
+  }
+
+  getTheme(): string {
+    return this.themeSubject.value;
+  }
+}

src/custom-theme.scss

@@ -66,19 +66,27 @@ $DSOMM-dark-theme: mat.define-dark-theme((
 // Light Mode Styles
 // ----------------------------------------------
 body {
-  @include apply-theme($light-theme);
-  @include mat.all-component-themes($DSOMM-light-theme);
 
   .title-button,
   h1, h2, h3, h4, h5, h6 {
     color: map-get($light-theme, text);
   }
 }
 
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --heatmap-disabled: #888888;
+  --heatmap-cursor: #3f51b5;
+  --heatmap-background: white;
+  --heatmap-stroke: black;
+
+  @include mat.all-component-themes($DSOMM-light-theme);
+}
+
 // ----------------------------------------------
 // Dark Mode Styles
 // ----------------------------------------------
-body.night-mode {
+body.dark-theme {
   @include apply-theme($custom-dark-theme);
   @include mat.all-component-themes($DSOMM-dark-theme);
 
@@ -87,6 +95,7 @@ body.night-mode {
     color: map-get($custom-dark-theme, text);
   }
 
+
   // Common containers
   mat-card,
   .mat-dialog-container,
@@ -126,17 +135,28 @@ body.night-mode {
   }
 
   // Circular heatmap (radar chart)
-  .circular-heat text,
-  .labels.segment text {
-    fill: #ffffff !important;
-  }
+
 
   .circular-heat line,
   .circular-heat path {
     stroke: #000000;
   }
 }
 
+.dark-theme {
+
+
+  --heatmap-filled: #4caf50;
+  --heatmap-disabled: #666666;
+  --heatmap-cursor: #80deea;
+  --heatmap-background: #bbbbbb;
+  --heatmap-stroke: #000000;
+
+
+
+  @include mat.all-component-themes($DSOMM-dark-theme);
+}
+
 .button-container {
   display: flex;
   flex-direction: column; // Vertical alignment

src/index.html

@@ -17,7 +17,7 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
   </head>
-  <body class="mat-typography">
+  <body class="light-theme">
     <app-root></app-root>
   </body>
 </html>