dark theme color improvements; scss improvements, removed hardcoded colors. Incorporate4d lots of vbakke's requests (cleaning up code). Fixed the persistence of theme after refresh.

Author: aguero-tech

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

@@ -65,21 +65,7 @@ export class CircularHeatmapComponent implements OnInit {
   showFilters: boolean;
   markdown: md = md();
   theme: string;
-  theme_colors: Record<string, string>;
-  themes: Record<string, Record<string, string>> = {
-    light: {
-      background: '#ffffff',
-      disabled: '#dddddd',
-      filled: 'green',
-      cursor: 'green',
-    },
-    night: {
-      background: '#dddddd',
-      disabled: '#888888',
-      filled: 'green',
-      cursor: 'green',
-    },
-  };
+  theme_colors!: Record<string, string>;
 
   constructor(
     private yaml: ymlService,
@@ -89,10 +75,7 @@ export class CircularHeatmapComponent implements OnInit {
   ) {
     this.showOverlay = false;
     this.showFilters = true;
-    this.theme = 'light';
     this.theme = this.themeService.getTheme();
-
-    this.theme_colors = this.themes[this.theme];
   }
 
   ngOnInit(): void {
@@ -657,17 +640,11 @@ export class CircularHeatmapComponent implements OnInit {
         cursors
           .append('path')
           .attr('id', 'hover')
-          .attr('pointer-events', 'none')
-          .attr('stroke', _self.theme_colors['cursor'])
-          .attr('stroke-width', '7')
-          .attr('fill', 'transparent');
+          .attr('pointer-events', 'none');
         cursors
           .append('path')
           .attr('id', 'selected')
-          .attr('pointer-events', 'none')
-          .attr('stroke', '#232323')
-          .attr('stroke-width', '4')
-          .attr('fill', 'transparent');
+          .attr('pointer-events', 'none');
       });
     }
 

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

@@ -40,24 +40,13 @@ export class SidenavButtonsComponent implements OnInit {
   constructor(private themeService: ThemeService) {}
 
   ngOnInit(): void {
-    const themePref = localStorage.getItem('theme');
-    this.isNightMode = themePref === 'dark';
-    this.applyTheme();
+    const currentTheme = this.themeService.getTheme();
+    this.isNightMode = currentTheme === 'dark';
   }
 
   toggleTheme(): void {
-    console.log('[toggleTheme] Triggered');
-
     this.isNightMode = !this.isNightMode;
     const newTheme = this.isNightMode ? 'dark' : 'light';
     this.themeService.setTheme(newTheme);
   }
-
-  private applyTheme(): void {
-    if (this.isNightMode) {
-      document.body.classList.add('night-mode');
-    } else {
-      document.body.classList.remove('night-mode');
-    }
-  }
-}
+}

src/app/service/theme.service.ts

@@ -6,10 +6,7 @@ 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);
-  }
+  constructor() {}
 
   initTheme(): void {
     const saved = localStorage.getItem('theme') || 'light';
@@ -19,12 +16,8 @@ export class ThemeService {
   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);
-    });
+    localStorage.setItem('theme', theme);
+    this.themeSubject.next(theme);
   }
 
   getTheme(): string {

src/custom-theme.scss

@@ -75,10 +75,14 @@ body {
 
 .light-theme {
   --heatmap-filled: #4caf50;
-  --heatmap-disabled: #888888;
-  --heatmap-cursor: #3f51b5;
+  --heatmap-disabled: #dddddd;
+  --heatmap-cursor: green;
   --heatmap-background: white;
   --heatmap-stroke: black;
+  --heatmap-cursor-selected:var(--heatmap-cursor);
+  --heatmap-cursor-hover: transparent;
+
+
 
   @include mat.all-component-themes($DSOMM-light-theme);
 }
@@ -129,12 +133,6 @@ body.dark-theme {
     }
   }
 
-  // Matrix override
-  .matrix-output p,
-  .matrix-output span,
-  .matrix-output div {
-    color: #e0e0e0;
-  }
 
   // Circular heatmap (radar chart)
   .circular-heat text,
@@ -145,24 +143,61 @@ body.dark-theme {
 
   .circular-heat line,
   .circular-heat path {
-    stroke: #000000;
+    stroke: var(--heatmap-stroke);
   }
 }
 
-.dark-theme {
+body.dark-theme {
   --heatmap-filled: #4caf50;
   --heatmap-disabled: #666666;
-  --heatmap-cursor: #80deea;
+  --heatmap-cursor: green;
   --heatmap-background: #bbbbbb;
   --heatmap-stroke: #000000;
+  --heatmap-cursor-selected:var(--heatmap-cursor);
+  --heatmap-cursor-hover: transparent;
 
+  app-matrix a:visited {
+    color: #d4baf4;
+  }
 
+  app-matrix .tags-activity,
+  app-matrix .tags-activity span {
+    color: #397af4;
+  }
 
-  @include mat.all-component-themes($DSOMM-dark-theme);
+  .mat-chip.mat-standard-chip {
+    color: #ababab;
+  }
+
+  .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
+    background-color: #74b277;
+  }
 }
 
+
+
+
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+
 .button-container {
   display: flex;
   flex-direction: column; // Vertical alignment
   gap: 10px; // Space between buttons
-}
+}
+
+svg .cursors path {
+  fill: transparent;
+  pointer-events: none;
+}
+
+svg .cursors #hover {
+  stroke: var(--heatmap-cursor);
+  stroke-width: 7px;
+}
+
+svg .cursors #selected {
+  stroke: var(--heatmap-cursor-selected, #000000); // optional fallback
+  stroke-width: 7px;
+}
+

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="light-theme">
+  <body>
     <app-root></app-root>
   </body>
 </html>

src/main.ts

@@ -1,3 +1,8 @@
+const savedTheme = localStorage.getItem('theme') || 'light';
+document.body.classList.remove('light-theme', 'dark-theme');
+document.body.classList.add(`${savedTheme}-theme`);
+console.log('[main.ts] Theme set to:', savedTheme); //
+
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';