Repository: devsecopsmaturitymodel/DevSecOps-MaturityModel
Pull request #381: Dark Theme v2.0
Author: login: aguero-tech
Created: 2025-03-25T21:30:54Z | Merged: 2025-05-09T11:07:13Z

@vbakke & @wurstbrot  thanks for the feedback on #374,  since we are making major angular upgrades, i took off the matrix buttons, so this PR solely focuses on dark theme improvements.

1. Moved light/dark toggle button to the side nav
2.  icon toggle colors match the theme.
3. changed the background and headings of text/drawers (in dark mode)
4. made the heatmap gridlines & text white to contrast with dark background (in dark mode).

Sorry i did not change the DSOMM in black on the top left.  I think it looks pretty rad, and i didn't want to load another image lol.
![image](https://github.com/user-attachments/assets/1c1c688a-450c-407c-bdce-1a21384aa9bb)



Diff:
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 996312b7c..b0004f02b 100644
--- a/src/app/app.component.ts
+++ b/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') {
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.css b/src/app/component/circular-heatmap/circular-heatmap.component.css
index 2056fa017..51b43e55d 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.css
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.css
@@ -71,16 +71,26 @@
 }
 
 .overlay-close {
-  border: black solid 1px;
-  background-color: rgba(0, 0, 0, 0);
   border: none;
-  color: black;
+  background-color: rgba(0, 0, 0, 0);
   grid-column: 2/3;
   grid-row: 1/4;
   display: grid;
-  justify-content: top;
+  justify-content: center;
+  align-items: start;
   margin-left: auto;
 }
+
+/* overlay-close - light theme */
+:host-context(body.light-theme) .overlay-close {
+  color: black;
+}
+
+/* overlay-close - dark theme */
+:host-context(body.dark-theme) .overlay-close {
+  color: white;
+}
+
 .team-filter {
   padding: 0.4rem;
   grid-column: 2/3;
@@ -161,6 +171,6 @@ button.filter-toggle {
   
   .overlay-details {
     width: 100%;
-  }  
+  }
 
 }
\ No newline at end of file
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.ts b/src/app/component/circular-heatmap/circular-heatmap.component.ts
index 4d737b11f..99d2571d4 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.ts
+++ b/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;
@@ -63,27 +64,56 @@ export class CircularHeatmapComponent implements OnInit {
   showOverlay: boolean;
   showFilters: boolean;
   markdown: md = md();
+  theme: string;
+  theme_colors!: Record<string, string>;
 
   constructor(
     private yaml: ymlService,
     private router: Router,
+    private themeService: ThemeService,
     public modal: ModalMessageComponent
   ) {
     this.showOverlay = false;
     this.showFilters = true;
+    this.theme = this.themeService.getTheme();
   }
 
   ngOnInit(): void {
-    console.log(`${this.perfNow()}s: ngOnInit`);
-    // 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();
-      });
+    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(),
+      };
+
+      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>;
@@ -405,7 +435,6 @@ export class CircularHeatmapComponent implements OnInit {
       .innerRadius(innerRadius)
       .segmentHeight(segmentHeight)
       .domain([0, 1])
-      .range(['white', 'green'])
       .radialLabels(radial_labels)
       .segmentLabels(segment_labels);
 
@@ -498,6 +527,7 @@ export class CircularHeatmapComponent implements OnInit {
     var segmentLabels: any[] = [];
 
     //console.log(segmentLabels)
+    let _self: any = this;
 
     function chart(selection: any) {
       selection.each(function (this: any, data: any) {
@@ -548,7 +578,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));
           });
@@ -610,17 +640,11 @@ export class CircularHeatmapComponent implements OnInit {
         cursors
           .append('path')
           .attr('id', 'hover')
-          .attr('pointer-events', 'none')
-          .attr('stroke', 'green')
-          .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');
       });
     }
 
@@ -716,7 +740,7 @@ export class CircularHeatmapComponent implements OnInit {
   noActivitytoGrey(): void {
     for (var x = 0; x < this.ALL_CARD_DATA.length; x++) {
       if (this.ALL_CARD_DATA[x]['Done%'] == -1) {
-        d3.select('#index-' + x).attr('fill', '#DCDCDC');
+        d3.select('#index-' + x).attr('fill', this.theme_colors['disabled']);
       }
     }
   }
@@ -822,7 +846,7 @@ export class CircularHeatmapComponent implements OnInit {
       var colorSector = d3
         .scaleLinear<string, string>()
         .domain([0, 1])
-        .range(['white', 'green']);
+        .range([this.theme_colors['background'], this.theme_colors['filled']]);
 
       if (cntAll !== 0) {
         this.ALL_CARD_DATA[index]['Done%'] = cntTrue / cntAll;
@@ -833,7 +857,10 @@ export class CircularHeatmapComponent implements OnInit {
       } else {
         this.ALL_CARD_DATA[index]['Done%'] = -1;
         // console.log(`${this.ALL_CARD_DATA[index].SubDimension} ${this.ALL_CARD_DATA[index].Level} None`);
-        d3.select('#index-' + index).attr('fill', '#DCDCDC');
+        d3.select('#index-' + index).attr(
+          'fill',
+          this.theme_colors['disabled']
+        );
       }
     }
   }
diff --git a/src/app/component/dependency-graph/dependency-graph.component.ts b/src/app/component/dependency-graph/dependency-graph.component.ts
index b1e253220..4990ae632 100644
--- a/src/app/component/dependency-graph/dependency-graph.component.ts
+++ b/src/app/component/dependency-graph/dependency-graph.component.ts
@@ -1,6 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ElementRef } from '@angular/core';
 import * as d3 from 'd3';
 import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service';
+import { Subscription } from 'rxjs';
+import { ThemeService } from '../../service/theme.service';
 
 export interface graphNodes {
   id: string;
@@ -35,10 +37,24 @@ export class DependencyGraphComponent implements OnInit {
   @Input() subDimension: string = '';
   @Input() activityName: string = '';
 
-  constructor(private yaml: ymlService) {}
+  private themeSub: Subscription | undefined;
+  currentTheme: string = 'light'; // default
+
+  constructor(
+    private yaml: ymlService,
+    private elementRef: ElementRef,
+    private themeService: ThemeService
+  ) {}
 
   ngOnInit(): void {
     this.yaml.setURI('./assets/YAML/generated/generated.yaml');
+
+    this.currentTheme = this.themeService.getTheme();
+    this.themeSub = this.themeService.theme$.subscribe(theme => {
+      this.currentTheme = theme;
+      this.applyTextColor(theme);
+    });
+
     // Function sets data
     this.yaml.getJson().subscribe(data => {
       this.graphData = { nodes: [], links: [] };
@@ -108,7 +124,26 @@ export class DependencyGraphComponent implements OnInit {
     }
   }
 
+  applyTextColor(theme: string): void {
+    const fill = theme === 'dark' ? '#ffffff' : '#000000';
+    const selectedNodeColor = theme === 'dark' ? '#666666' : 'yellow';
+    const defaultNodeColor = this.COLOR_OF_NODE;
+
+    d3.select(this.elementRef.nativeElement)
+      .selectAll('text')
+      .attr('fill', fill);
+
+    d3.select(this.elementRef.nativeElement)
+      .selectAll('circle')
+      .attr('fill', (d: any) =>
+        d.id === this.activityName ? selectedNodeColor : defaultNodeColor
+      );
+  }
+
   generateGraph(activity: string): void {
+    const selectedNodeColor =
+      this.currentTheme === 'dark' ? '#666666' : 'yellow';
+
     let svg = d3.select('svg'),
       width = +svg.attr('width'),
       height = +svg.attr('height');
@@ -162,10 +197,9 @@ export class DependencyGraphComponent implements OnInit {
     node
       .append('circle')
       .attr('r', 10)
-      .attr('fill', function (d) {
-        if (d.id == activity) return 'yellow';
-        else return defaultNodeColor;
-      });
+      .attr('fill', (d: any) =>
+        d.id === this.activityName ? selectedNodeColor : defaultNodeColor
+      );
 
     node
       .append('text')
@@ -175,6 +209,8 @@ export class DependencyGraphComponent implements OnInit {
         return d.id;
       });
 
+    this.applyTextColor(this.currentTheme);
+
     this.simulation.nodes(this.graphData['nodes']).on('tick', ticked);
 
     this.simulation.force('link').links(this.graphData['links']);
diff --git a/src/app/component/matrix/matrix.component.css b/src/app/component/matrix/matrix.component.css
index 34c39e3dd..7351c6508 100644
--- a/src/app/component/matrix/matrix.component.css
+++ b/src/app/component/matrix/matrix.component.css
@@ -61,9 +61,20 @@
 .tags-activity {
   font-weight: 800;
   font-style: italic;
-  color: rgb(0, 113, 151);
   font-size: 12px;
 }
+/*tag activity - light */
+:host-context(body.light-theme) .tags-activity,
+:host-context(body.light-theme) .tags-activity span {
+  color: rgb(0, 113, 151);
+}
+
+/*tag activity - dark */
+:host-context(body.dark-theme) .tags-activity,
+:host-context(body.dark-theme) .tags-activity span {
+  color: #397af4;
+}
+
 .reset-button {
   background-color: #66bb6a;
   display: block;
diff --git a/src/app/component/sidenav-buttons/sidenav-buttons.component.html b/src/app/component/sidenav-buttons/sidenav-buttons.component.html
index 2e40515ab..b499a5a13 100644
--- a/src/app/component/sidenav-buttons/sidenav-buttons.component.html
+++ b/src/app/component/sidenav-buttons/sidenav-buttons.component.html
@@ -1,4 +1,5 @@
 <mat-nav-list>
+  <!-- Dynamic nav links -->
   <a
     mat-list-item
     *ngFor="let option of Options; index as i"
@@ -7,3 +8,17 @@
     <h3 mat-line>{{ Options[i] }}</h3>
   </a>
 </mat-nav-list>
+
+<!-- Separate theme toggle outside nav-list -->
+<mat-divider></mat-divider>
+
+<mat-list>
+  <mat-list-item (click)="toggleTheme()" style="cursor: pointer">
+    <mat-icon mat-list-icon color="primary">
+      {{ isNightMode ? 'light_mode' : 'dark_mode' }}
+    </mat-icon>
+    <h3 mat-line>
+      {{ isNightMode ? 'Switch to Light Mode' : 'Switch to Dark Mode' }}
+    </h3>
+  </mat-list-item>
+</mat-list>
diff --git a/src/app/component/sidenav-buttons/sidenav-buttons.component.spec.ts b/src/app/component/sidenav-buttons/sidenav-buttons.component.spec.ts
index 40ce57642..fd22d9bb9 100644
--- a/src/app/component/sidenav-buttons/sidenav-buttons.component.spec.ts
+++ b/src/app/component/sidenav-buttons/sidenav-buttons.component.spec.ts
@@ -32,7 +32,7 @@ describe('SidenavButtonsComponent', () => {
 
   it('check for navigation names being shown in the same order as options array', () => {
     const HTMLElement: HTMLElement = fixture.nativeElement;
-    const NavigationList = HTMLElement.querySelectorAll('h3')!;
+    const NavigationList = HTMLElement.querySelectorAll('a > h3')!;
     let NavigationNamesBeingShown = [];
     for (var x = 0; x < NavigationList.length; x += 1) {
       NavigationNamesBeingShown.push(NavigationList[x].textContent);
diff --git a/src/app/component/sidenav-buttons/sidenav-buttons.component.ts b/src/app/component/sidenav-buttons/sidenav-buttons.component.ts
index a48f9703d..53073eb35 100644
--- a/src/app/component/sidenav-buttons/sidenav-buttons.component.ts
+++ b/src/app/component/sidenav-buttons/sidenav-buttons.component.ts
@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ThemeService } from '../../service/theme.service';
 
 @Component({
   selector: 'app-sidenav-buttons',
   templateUrl: './sidenav-buttons.component.html',
   styleUrls: ['./sidenav-buttons.component.css'],
 })
-export class SidenavButtonsComponent {
+export class SidenavButtonsComponent implements OnInit {
   Options: string[] = [
     'Overview',
     'Matrix',
@@ -33,5 +34,19 @@ export class SidenavButtonsComponent {
     '/about',
     '/userday',
   ];
-  constructor() {}
+
+  isNightMode = false;
+
+  constructor(private themeService: ThemeService) {}
+
+  ngOnInit(): void {
+    const currentTheme = this.themeService.getTheme();
+    this.isNightMode = currentTheme === 'dark';
+  }
+
+  toggleTheme(): void {
+    this.isNightMode = !this.isNightMode;
+    const newTheme = this.isNightMode ? 'dark' : 'light';
+    this.themeService.setTheme(newTheme);
+  }
 }
diff --git a/src/app/component/teams/teams.component.css b/src/app/component/teams/teams.component.css
index f233fb6c4..ae7eccd15 100644
--- a/src/app/component/teams/teams.component.css
+++ b/src/app/component/teams/teams.component.css
@@ -33,6 +33,7 @@ h3 {
   height: 100px;
   background-color: #66bb6a;
   border-radius: 10px;
+  color: white;
   margin-right: 20px;
   display: flex; /* Use flex layout */
   justify-content: center; /* Center horizontally */
diff --git a/src/app/service/theme.service.ts b/src/app/service/theme.service.ts
new file mode 100644
index 000000000..810b76539
--- /dev/null
+++ b/src/app/service/theme.service.ts
@@ -0,0 +1,26 @@
+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() {}
+
+  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`);
+    localStorage.setItem('theme', theme);
+    this.themeSubject.next(theme);
+  }
+
+  getTheme(): string {
+    return this.themeSubject.value;
+  }
+}
diff --git a/src/custom-theme.scss b/src/custom-theme.scss
index 85ffe50ce..d7d437a97 100644
--- a/src/custom-theme.scss
+++ b/src/custom-theme.scss
@@ -1,44 +1,188 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue,
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc,
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  --heatmap-filled: #007700;
+  --heatmap-disabled: #666666;
+  --heatmap-cursor: green;
+  --heatmap-background: #bbbbbb;
+  --heatmap-stroke: #000000;
+  --heatmap-cursor-selected:var(--heatmap-cursor);
+  --heatmap-cursor-hover: transparent;
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+  }
+
+  // General properties
+  p, li, tr {
+    color: #e0e0e0;
+  }
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0;
+    }
+  }
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff;
+  }
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: var(--heatmap-stroke);
+  }
+
+  .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;
+}
diff --git a/src/index.html b/src/index.html
index 4d624b57e..8d114a99a 100644
--- a/src/index.html
+++ b/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>
     <app-root></app-root>
   </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index fa4e0aef3..345453bdf 100644
--- a/src/main.ts
+++ b/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';
 
diff --git a/src/styles.css b/src/styles.css
index 3f9148dbb..e1b4d99e7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -8,6 +8,13 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
     padding: 0.3em;
 }
 
+.dark-theme .userday table :is(td, th) {
+    border-color: #e0e0e0;
+}
+.dark-theme .userday tr:nth-child(even) {
+    background-color: #365d36;
+}
+
 .userday tr:nth-child(even) {
     background-color: #66bb6a;
 }


Reviews:
user: login: vbakke
body: Thank you for your contribution, @aguero-tech. Please see my comments. Feel free to disagree to some of them.  Just let me know why :)
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-19T21:07:51Z
user: login: vbakke
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-20T07:10:53Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T14:05:36Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T14:10:28Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T14:44:29Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T14:45:33Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T14:50:08Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T14:56:42Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T15:21:39Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T15:25:36Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T15:36:06Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T15:38:01Z
user: login: vbakke
body: Much better! Thank you @aguero-tech! :)

I found a few more minor things. 


* In `teams.component.css` we get a very low contrast on the teams' names. I suggest we add:
`color: white;` to the `.team-list ul li { ... }` (for both light and dark mode)

* In `styles.css` (used in 'DSOMM User Day 2024' _(not sure why it is still here)_), the green table row need adjustments in the dark mode:
```
.dark-theme .userday table :is(td, th) {
    border-color: #e0e0e0;
}
.dark-theme .userday tr:nth-child(even) {
    background-color: #365d36;
}
```
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-27T09:36:07Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-28T12:58:59Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T15:57:16Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T18:09:51Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T18:20:09Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T18:26:57Z
user: login: vbakke
body: Think we are there now.  Just two minor issues
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-05-01T14:30:01Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T17:18:33Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T17:27:02Z
user: login: vbakke
body: Excellent, @aguero-tech! Looking forward to that! :) 🍻 

Looks good to me now @wurstbrot  / @0x41head . :) 👍 
state: DISMISSED
author_association: COLLABORATOR
submitted_at: 2025-05-05T19:42:44Z
user: login: wurstbrot
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-05T19:59:54Z
user: login: wurstbrot
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-05T20:00:19Z
user: login: wurstbrot
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-05T20:00:32Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T16:35:10Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T16:35:22Z
user: login: aguero-tech
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T16:41:30Z

Review comments:
diff_hunk: @@ -63,27 +64,73 @@ export class CircularHeatmapComponent implements OnInit {
   showOverlay: boolean;
   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',
+    },
+  };
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: vbakke
body: With the ` this.themeService.theme$.subscribe` I think we'd better remove these lines (my initial hack for storing the colours). Much better reading the colours from CSS, like you do :)
created_at: 2025-04-19T18:51:55Z
author_association: COLLABORATOR
diff_hunk: @@ -15,6 +15,7 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../modal-message/modal-message.component';
+import { ThemeService } from '../../service/theme.service';
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: vbakke
body: _(Not sure which line is causing the bug, so I put the review comment here.)_

Bug: Dark mode not initialized correctly

Steps to reproduce:
 - Open DSOMM (standard light mode)
 - Change to Dark mode (ok)
 - Refresh page (renders incorrectly with light mode colours)
created_at: 2025-04-19T18:58:01Z
author_association: COLLABORATOR
diff_hunk: @@ -15,6 +15,7 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../modal-message/modal-message.component';
+import { ThemeService } from '../../service/theme.service';
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: vbakke
body: _(Not sure which line is causing the bug, so I put the review comment here.)_

Bug: Dark mode not initialized correctly

Steps to reproduce:
 - Open DSOMM (standard light mode)
 - Change to Dark mode (ok)
 - Refresh page (renders incorrectly with light mode colours)
created_at: 2025-04-19T18:58:01Z
author_association: COLLABORATOR
diff_hunk: @@ -611,7 +658,7 @@ export class CircularHeatmapComponent implements OnInit {
           .append('path')
           .attr('id', 'hover')
           .attr('pointer-events', 'none')
-          .attr('stroke', 'green')
+          .attr('stroke', _self.theme_colors['cursor'])
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: vbakke
body: Line `.attr('stroke', '#232323')` should use `theme_colors`
created_at: 2025-04-19T19:47:32Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,168 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .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.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+  // Matrix override
+  .matrix-output p,
+  .matrix-output span,
+  .matrix-output div {
+    color: #e0e0e0;
+  }
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff !important;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: #000000;
path: src/custom-theme.scss
user: login: vbakke
body: The `.circular-heat path` collides with `--heatmap-stroke`. We should remove one of them.
created_at: 2025-04-19T19:56:40Z
author_association: COLLABORATOR
diff_hunk: @@ -15,6 +15,7 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../modal-message/modal-message.component';
+import { ThemeService } from '../../service/theme.service';
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: vbakke
body: _(Not sure which line is causing the bug, so I put the review comment here.)_

Bug: The theme `cursor` is not switched, when switching mode.
The cursors are separate svg elements, that are being moved around. (To avoid other sectors clipping the border line.)

Maybe better to use 
```
svg .cursors path {
  fill: transparent;
  pointer-events: none;
}
svg .cursors #hover {
  stroke: #008000;
  stroke-width: 10px;
}
svg .cursors #selected {
  stroke: #000000;
  stroke-width: 5px;
}
```
and remove the  `.attr('stroke', ...` , `'stroke-width'`, `'pointer-events'`, and `'fill'` from the typescript file.


Side comment: I suggest we add the name `svg` in front of the other CSS selectors referring to elements inside the svg. Not because it is necessary, but it might be more readable, mental help.
created_at: 2025-04-19T20:19:59Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,168 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .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.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+  // Matrix override
path: src/custom-theme.scss
user: login: vbakke
body: The `.matrix-output` don't seem to match anything
created_at: 2025-04-19T20:57:52Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,168 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .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.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+  // Matrix override
+  .matrix-output p,
+  .matrix-output span,
+  .matrix-output div {
+    color: #e0e0e0;
+  }
+
path: src/custom-theme.scss
user: login: vbakke
body: I suggest tweaking the default colours slightly for the dark mode:

```
  app-matrix a:visited {
    color: #d4baf4;
  }
  app-matrix .tags-activity,
  app-matrix .tags-activity span {
    color: #397af4;
  }
    .mat-chip.mat-standard-chip {
    color: #ababab;
  }
  .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
    background-color: #74b277
  }
  ```
created_at: 2025-04-19T20:58:41Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,168 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --heatmap-disabled: #888888;
path: src/custom-theme.scss
user: login: vbakke
body: I think #888888 is a tad dark for the light version. This colour attracts focus, while these sectors should rather avoid focus.

Do you mind testing the original #dddddd?
created_at: 2025-04-20T07:10:53Z
author_association: COLLABORATOR
diff_hunk: @@ -63,27 +64,73 @@ export class CircularHeatmapComponent implements OnInit {
   showOverlay: boolean;
   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',
+    },
+  };
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: aguero-tech
body: makes sense!  WILCO. (Will comply)
created_at: 2025-04-23T14:05:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -15,6 +15,7 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../modal-message/modal-message.component';
+import { ThemeService } from '../../service/theme.service';
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: aguero-tech
body: found it.  seems like it reloads with white and takes a cycle of themes to get it right.  Looking into it.
created_at: 2025-04-23T14:10:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -15,6 +15,7 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../modal-message/modal-message.component';
+import { ThemeService } from '../../service/theme.service';
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: aguero-tech
body: issue was the theme.service.ts was overwriting with light theme after refresh.  Fixed.
created_at: 2025-04-23T14:44:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -15,6 +15,7 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../modal-message/modal-message.component';
+import { ThemeService } from '../../service/theme.service';
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: aguero-tech
body: related to previous issue.  toggle is synced with appropriate theme after refresh.  Dark persists after refreshes. Fixed.
created_at: 2025-04-23T14:45:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -611,7 +658,7 @@ export class CircularHeatmapComponent implements OnInit {
           .append('path')
           .attr('id', 'hover')
           .attr('pointer-events', 'none')
-          .attr('stroke', 'green')
+          .attr('stroke', _self.theme_colors['cursor'])
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: aguero-tech
body: Done!
created_at: 2025-04-23T14:50:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,168 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .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.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+  // Matrix override
+  .matrix-output p,
+  .matrix-output span,
+  .matrix-output div {
+    color: #e0e0e0;
+  }
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff !important;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: #000000;
path: src/custom-theme.scss
user: login: aguero-tech
body: I have changed it to be dynamic, instead of fixed.
`  .circular-heat line,
  .circular-heat path {
    stroke: var(--heatmap-stroke);
  }
}

body.dark-theme {
  --heatmap-filled: #4caf50;
  --heatmap-disabled: #666666;
  --heatmap-cursor: green;
  --heatmap-background: #bbbbbb;
  --heatmap-stroke: #000000;
`
created_at: 2025-04-23T14:56:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -15,6 +15,7 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../modal-message/modal-message.component';
+import { ThemeService } from '../../service/theme.service';
path: src/app/component/circular-heatmap/circular-heatmap.component.ts
user: login: aguero-tech
body: ![image](https://github.com/user-attachments/assets/6284978b-bc36-4800-9ed9-54b98f2cba71)
moved the cursor and some other theme stuff from circular-heatmap > scss.  Also added svg .cursors #selected and #hover :) thanks for the svg,  makes sense. (bottom of custom-theme.scss) line 177. Done
created_at: 2025-04-23T15:21:39Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,168 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .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.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+  // Matrix override
path: src/custom-theme.scss
user: login: aguero-tech
body: this was when i was first working on the matrix theme changes.  no longer used.  thanks!  deleted.
created_at: 2025-04-23T15:25:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,168 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .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.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+  // Matrix override
+  .matrix-output p,
+  .matrix-output span,
+  .matrix-output div {
+    color: #e0e0e0;
+  }
+
path: src/custom-theme.scss
user: login: aguero-tech
body: ![image](https://github.com/user-attachments/assets/05909ee0-a0d6-402a-a85d-acf577621699)
incorporated your color improvements for dark theme.
created_at: 2025-04-23T15:36:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,168 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --heatmap-disabled: #888888;
path: src/custom-theme.scss
user: login: aguero-tech
body: back to the d's. 
![image](https://github.com/user-attachments/assets/e20c04f3-cf88-47a6-b5d2-f3a0f5f26cbe)

created_at: 2025-04-23T15:38:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
path: src/custom-theme.scss
user: login: vbakke
body: The text pages (such as About Us) look quite harsh with white text. I suggest we add:
```
  p, li, tr 
  {
    color: #e0e0e0;
  }

```
created_at: 2025-04-27T08:35:32Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
path: src/custom-theme.scss
user: login: vbakke
body: Is `!important` really necessary? It tends to bite our tail later, especially when using it on a top level selector, like these ones here. (and below)
created_at: 2025-04-27T09:06:03Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
path: src/custom-theme.scss
user: login: vbakke
body: I noticed that dark theme does not display visited links in a different colour. (While light mode does.)

I suggest adding this, and a change to apply-theme() below.
```
        link: #bb86fc,
        visited-link: #dac7f7
```

_Disclaimer: I do not know SCSS, so please verify if my suggestions make sense : )_
created_at: 2025-04-27T09:09:08Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
path: src/custom-theme.scss
user: login: vbakke
body: ref the comment above:
```
  a:visited {
    color: map-get($theme, visited-link);
  }
```
created_at: 2025-04-27T09:09:45Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff !important;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: var(--heatmap-stroke);
+  }
+}
+
+body.dark-theme {
+  --heatmap-filled: #4caf50;
+  --heatmap-disabled: #666666;
+  --heatmap-cursor: green;
+  --heatmap-background: #bbbbbb;
+  --heatmap-stroke: #000000;
+  --heatmap-cursor-selected:var(--heatmap-cursor);
+  --heatmap-cursor-hover: transparent;
+
+  app-matrix a:visited {
path: src/custom-theme.scss
user: login: vbakke
body: If these styles only apply to the app-matrix, would it not be better to move them to the app-matrix component?

After all, we have "component local CSS" in each component. And in my opinion each component much allow both dark and light mode in its local CSS adjustments.  The main custom-theme.scss should deal with the general styles, and not with component specific details.
created_at: 2025-04-27T09:17:51Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff !important;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: var(--heatmap-stroke);
+  }
+}
+
+body.dark-theme {
+  --heatmap-filled: #4caf50;
+  --heatmap-disabled: #666666;
+  --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;
+  }
+
+  .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 {
path: src/custom-theme.scss
user: login: vbakke
body: Same with the SVG styles, that only belong to the circular heatmap. But I don't know if it is possible to refer to --heatmap-cursor from a component CSS. If there is a technical problem, I don't mind leaving them here : )
created_at: 2025-04-27T09:24:17Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
path: src/custom-theme.scss
user: login: aguero-tech
body: Nope not really! I was using that for troubleshooting. Will remove.
created_at: 2025-04-28T12:58:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
path: src/custom-theme.scss
user: login: aguero-tech
body: cherry on top. Looks great!
created_at: 2025-04-30T15:57:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
path: src/custom-theme.scss
user: login: aguero-tech
body: Yeah, right on! I updated the link colors so they're now determined by the browser for visited states, and I set specific colors for dark mode links in custom-theme.scss around line 15.
created_at: 2025-04-30T18:09:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff !important;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: var(--heatmap-stroke);
+  }
+}
+
+body.dark-theme {
+  --heatmap-filled: #4caf50;
+  --heatmap-disabled: #666666;
+  --heatmap-cursor: green;
+  --heatmap-background: #bbbbbb;
+  --heatmap-stroke: #000000;
+  --heatmap-cursor-selected:var(--heatmap-cursor);
+  --heatmap-cursor-hover: transparent;
+
+  app-matrix a:visited {
path: src/custom-theme.scss
user: login: aguero-tech
body: I tried moving the local heatmap and cursor components over to its local respective css. but alas...I'm not that good and kept running into a black rendition of the circular graph despite my troubleshooting efforts.   I'm guessing it has to do with DOM access.
![image](https://github.com/user-attachments/assets/37ff9057-e4c0-4311-8089-b9605a2739f9)

created_at: 2025-04-30T18:20:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,203 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c !important;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0 !important;
+    }
+  }
+
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff !important;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: var(--heatmap-stroke);
+  }
+}
+
+body.dark-theme {
+  --heatmap-filled: #4caf50;
+  --heatmap-disabled: #666666;
+  --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;
+  }
+
+  .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 {
path: src/custom-theme.scss
user: login: aguero-tech
body: please see above. lol I ran into a tech problem trying to move it lol. Thanks for not minding!
created_at: 2025-04-30T18:26:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -73,12 +73,12 @@
 .overlay-close {
   border: black solid 1px;
   background-color: rgba(0, 0, 0, 0);
-  border: none;
path: src/app/component/circular-heatmap/circular-heatmap.component.css
user: login: vbakke
body: Note sure why you added the border to the close button. I don't think it looks any good. And black cross is hard to see in the dark mode.
![image](https://github.com/user-attachments/assets/c4970c09-6264-4de7-89dc-7c2af964b3a2)

created_at: 2025-05-01T14:10:39Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,201 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue,
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc,
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
path: src/custom-theme.scss
user: login: vbakke
body: I still find the light mode's green colour a bit glary in dark mode.  Can you try with a darker shade of green?

![image](https://github.com/user-attachments/assets/60c8b9ef-18d0-476c-a36b-d575844a710b)
![image](https://github.com/user-attachments/assets/be32b59b-30d4-4195-9228-abb0cf089f28)


created_at: 2025-05-01T14:29:32Z
author_association: COLLABORATOR
diff_hunk: @@ -73,12 +73,12 @@
 .overlay-close {
   border: black solid 1px;
   background-color: rgba(0, 0, 0, 0);
-  border: none;
path: src/app/component/circular-heatmap/circular-heatmap.component.css
user: login: aguero-tech
body: you are totally right, my mistake.  I didn't go back to this.  Fixed "x" to adapt to black in light theme and white in dark. 
![image](https://github.com/user-attachments/assets/f5a5ea55-8f3f-408a-9cf3-3383340e10da)
![image](https://github.com/user-attachments/assets/3d40387b-adbe-47f5-93e8-1f23b4b6d9f1)

created_at: 2025-05-05T17:18:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,201 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue,
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc,
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
path: src/custom-theme.scss
user: login: aguero-tech
body: Sure! Done
![image](https://github.com/user-attachments/assets/0dbc353a-cdb0-47a1-8aae-2d07675c7eec)

created_at: 2025-05-05T17:27:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,201 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue,
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc,
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
path: src/custom-theme.scss
user: login: wurstbrot
body: please format the CSS and remove whitespaces
created_at: 2025-05-05T19:59:54Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,201 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue,
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc,
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+  // General properties
+  p, li, tr {
+    color: #e0e0e0;
+  }
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0;
+    }
+  }
+
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: var(--heatmap-stroke);
+  }
+}
+
+body.dark-theme {
+  --heatmap-filled: #007700;
+  --heatmap-disabled: #666666;
+  --heatmap-cursor: green;
+  --heatmap-background: #bbbbbb;
+  --heatmap-stroke: #000000;
+  --heatmap-cursor-selected:var(--heatmap-cursor);
+  --heatmap-cursor-hover: transparent;
+
+
+  .mat-chip.mat-standard-chip {
+    color: #ababab;
+  }
+
+  .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
+    background-color: #74b277;
+  }
+}
+
path: src/custom-theme.scss
user: login: wurstbrot
body: please format the CSS and remove whitespaces
created_at: 2025-05-05T20:00:19Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,201 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue,
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc,
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+  // General properties
+  p, li, tr {
+    color: #e0e0e0;
+  }
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0;
+    }
+  }
+
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: var(--heatmap-stroke);
+  }
+}
+
+body.dark-theme {
+  --heatmap-filled: #007700;
+  --heatmap-disabled: #666666;
+  --heatmap-cursor: green;
+  --heatmap-background: #bbbbbb;
+  --heatmap-stroke: #000000;
+  --heatmap-cursor-selected:var(--heatmap-cursor);
+  --heatmap-cursor-hover: transparent;
+
+
+  .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);
path: src/custom-theme.scss
user: login: wurstbrot
body: why is here a space?
created_at: 2025-05-05T20:00:32Z
author_association: COLLABORATOR
diff_hunk: @@ -1,44 +1,201 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue,
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc,
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+  // General properties
+  p, li, tr {
+    color: #e0e0e0;
+  }
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0;
+    }
+  }
+
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: var(--heatmap-stroke);
+  }
+}
+
+body.dark-theme {
+  --heatmap-filled: #007700;
+  --heatmap-disabled: #666666;
+  --heatmap-cursor: green;
+  --heatmap-background: #bbbbbb;
+  --heatmap-stroke: #000000;
+  --heatmap-cursor-selected:var(--heatmap-cursor);
+  --heatmap-cursor-hover: transparent;
+
+
+  .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);
path: src/custom-theme.scss
user: login: aguero-tech
body: spaces removed.
created_at: 2025-05-08T16:35:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,201 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue,
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc,
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
+
+  }
+  // General properties
+  p, li, tr {
+    color: #e0e0e0;
+  }
+
+  // Common containers
+  mat-card,
+  .mat-dialog-container,
+  .mat-expansion-panel,
+  .mat-accordion,
+  .overlay-wrapper {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+  }
+
+  // Dialog styling
+  .mat-dialog-container {
+    border: 1px solid #444;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  // Modal override
+  .overlay-modal {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+    border-radius: 6px;
+
+    mat-card {
+      background-color: transparent;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #e0e0e0;
+    }
+  }
+
+
+  // Circular heatmap (radar chart)
+  .circular-heat text,
+  .labels.segment text {
+    fill: #ffffff;
+  }
+
+
+  .circular-heat line,
+  .circular-heat path {
+    stroke: var(--heatmap-stroke);
+  }
+}
+
+body.dark-theme {
+  --heatmap-filled: #007700;
+  --heatmap-disabled: #666666;
+  --heatmap-cursor: green;
+  --heatmap-background: #bbbbbb;
+  --heatmap-stroke: #000000;
+  --heatmap-cursor-selected:var(--heatmap-cursor);
+  --heatmap-cursor-hover: transparent;
+
+
+  .mat-chip.mat-standard-chip {
+    color: #ababab;
+  }
+
+  .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
+    background-color: #74b277;
+  }
+}
+
path: src/custom-theme.scss
user: login: aguero-tech
body: formatted.
created_at: 2025-05-08T16:35:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,44 +1,201 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
+// ----------------------------------------------
+// Theme Colors and Typography
+// ----------------------------------------------
+$light-theme: (
+        background: white,
+        text: black,
+        link: blue,
+);
 
-$custom-typography: mat.define-typography-level(
-  $font-family: montserrat,
-  $font-weight: 400,
-  $font-size: 1rem,
-  $line-height: 1,
-  $letter-spacing: normal,
+$custom-dark-theme: (
+        background: #2c2c2c,
+        text: #e0e0e0,
+        link: #bb86fc,
 );
 
+$custom-typography: mat.define-typography-level(
+        $font-family: montserrat,
+        $font-weight: 400,
+        $font-size: 1rem,
+        $line-height: 1,
+        $letter-spacing: normal
+);
 @include mat.core($custom-typography);
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
+// ----------------------------------------------
+// Angular Material Palettes
+// ----------------------------------------------
+$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
 $DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $DSOMM-warn: mat.define-palette(mat.$red-palette);
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$DSOMM-theme: mat.define-light-theme((
-  color: (
-    primary: $DSOMM-primary,
-    accent: $DSOMM-accent,
-    warn: $DSOMM-warn,
-  )
+// ----------------------------------------------
+// Angular Material Themes
+// ----------------------------------------------
+$DSOMM-light-theme: mat.define-light-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
 ));
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($DSOMM-theme);
+$DSOMM-dark-theme: mat.define-dark-theme((
+        color: (
+                primary: $DSOMM-primary,
+                accent: $DSOMM-accent,
+                warn: $DSOMM-warn
+        )
+));
+
+// ----------------------------------------------
+// Base Theme Mixin
+// ----------------------------------------------
+@mixin apply-theme($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  a {
+    color: map-get($theme, link);
+  }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
+}
+
+// ----------------------------------------------
+// Light Mode Styles
+// ----------------------------------------------
+body {
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($light-theme, text);
+  }
+}
+
+.light-theme {
+  --heatmap-filled: #4caf50;
+  --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);
+}
+
+// ----------------------------------------------
+// Dark Mode Styles
+// ----------------------------------------------
+body.dark-theme {
+  @include apply-theme($custom-dark-theme);
+  @include mat.all-component-themes($DSOMM-dark-theme);
+
+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+
path: src/custom-theme.scss
user: login: aguero-tech
body: I have removed extra lines and spaces and have consolidated some ".body.dark-theme" code.   Some lines i did not align just to keep it nested, but we can move it if desired.
created_at: 2025-05-08T16:41:30Z
author_association: CONTRIBUTOR

PR comments:
user: login: aguero-tech
created_at: 2025-03-25T21:37:15Z
body: ![image](https://github.com/user-attachments/assets/4d898e91-1634-4140-ae78-52b0093938e9)

author_association: CONTRIBUTOR
user: login: vbakke
created_at: 2025-03-30T16:59:46Z
body: @aguero-tech , I created a [pull request](https://github.com/aguero-tech/DSOMM/pull/11) to your pull request, where the circular heatmap is drawn in dark / light mode. 

However, switching the light mode from the menu, currently does not update the setting of the circular component. Are you able to pass on the switch to the circular component? 
author_association: COLLABORATOR
user: login: vbakke
created_at: 2025-03-30T20:12:00Z
body: @aguero-tech , looks like adding the 'Switch to Dark Mode' is breaking the unittest `check for navigation names being shown in the same order as options array`. 

@0x41head: I'm a bit unsure about the benefit of this test, and what sort of mistakes this test is supposed to uncover. Is it meaningful?

author_association: COLLABORATOR
user: login: aguero-tech
created_at: 2025-03-30T23:15:56Z
body: Thank you @vbakke . I apologize. im out for the weekend. Will touch base on Tuesday. I'll look into the menu unit test break as well and see if I can ameliorate it or find some enlightenment about the purpose of the test as well. I appreciate it.
author_association: CONTRIBUTOR
user: login: vbakke
created_at: 2025-03-31T06:22:57Z
body: Not to worry @aguero-tech . I think I broke everything that cold be broken on my first PR. : )

Nor is this any rush. You're doing it in your spare time. Do it when time allows `🙂`
author_association: COLLABORATOR
user: login: 0x41head
created_at: 2025-03-31T07:12:44Z
body: fixed the unit test @vbakke @aguero-tech 

author_association: COLLABORATOR
user: login: vbakke
created_at: 2025-04-13T21:19:34Z
body: How are you doing @aguero-tech?

Do you see any issues regarding the PR https://github.com/aguero-tech/DSOMM/pull/11 ?
Or do you need any assistance with Angular and passing the `theme` to the `CircularHeatmapComponent`?
author_association: COLLABORATOR
user: login: aguero-tech
created_at: 2025-04-18T01:44:45Z
body: That was fun to work on. (learning is fun) @vbakke apologies for being absent.  I actually got in a minor motorcycle accident and was out for a couple weeks with a messed up shoulder, luckily no fractures/broken bones.  All good!  Here's a clip for proof of concept. Light theme has white graph background, while the dark theme has light gray. I hope this is close to what you had in mind.  Feel free to change the colors under custom-theme.scss (under  .dark-theme line 152) the trigger is done via theme.service.ts under the app>service folder.

https://github.com/user-attachments/assets/dec1efad-af30-4ca4-9139-90215e71dfa0


author_association: CONTRIBUTOR
user: login: vbakke
created_at: 2025-04-18T08:39:35Z
body: Dude, no need to apologize. We do this on our spare time. And having an_accident_ is definitely a good reason to focus on yourself! 😨

I was just meaning to check in. I don't always pick up on messages from GitHub myself, so I was just going to check that you weren't thinking you were waiting for feedback  😊

I'll have a look at the end result. Probably over the Easter weekend or so. Take care, both on and off the road  🤞😃 


author_association: COLLABORATOR
user: login: aguero-tech
created_at: 2025-04-23T15:47:20Z
body: @vbakke  thank you very much for being thurough and working on this together.  Been a good time so far. I'm done with the fixes. All yours! Let me know how i did!!  selected ya for re-review.
author_association: CONTRIBUTOR
user: login: aguero-tech
created_at: 2025-04-30T18:56:45Z
body: @vbakke all very good recommendations!  Thanks again!
author_association: CONTRIBUTOR
user: login: aguero-tech
created_at: 2025-05-05T17:33:11Z
body: Thanks @vbakke! We did it! lol first round on me.
author_association: CONTRIBUTOR
user: login: wurstbrot
created_at: 2025-05-05T20:04:05Z
body: @aguero-tech thank you. Great idea. Please run auto format with a tool over the files or fix the comments.
In the future, signed commits would be good.
author_association: COLLABORATOR
user: login: aguero-tech
created_at: 2025-05-08T16:43:31Z
body: I ran an auto formatting tool and didn't like what it changed, so i manually removed extra spaces and lines.  Let me work on re-establishing my signature. Sorry I let it expire and forgot about it.
author_association: CONTRIBUTOR
user: login: aguero-tech
created_at: 2025-05-08T17:16:12Z
body: Thanks for lessons on code quality and styling @wurstbrot  and @vbakke!  I think this should be it.  I finished my reformatting and got my GPG signed.  Let me know if there is anything else!  Thanks gentlemen!
author_association: CONTRIBUTOR
user: login: 0x41head
created_at: 2025-05-08T17:37:28Z
body: Can we change the text color for the acyclic graph as well ?
![image](https://github.com/user-attachments/assets/ffa5c2e2-fc4d-4f1a-821b-4a97375ade28)

author_association: COLLABORATOR
user: login: aguero-tech
created_at: 2025-05-08T17:41:12Z
body: Oh thats a good find @0x41head! Not sure where that is but I'll hunt it down. 
author_association: CONTRIBUTOR
user: login: 0x41head
created_at: 2025-05-08T18:25:03Z
body: @aguero-tech let me know if you have difficulties finding the root cause of the bug :+1:
author_association: COLLABORATOR
user: login: aguero-tech
created_at: 2025-05-08T20:09:25Z
body: Thanks @0x41head!

![image](https://github.com/user-attachments/assets/384c84ef-a2da-4526-9fc1-d8707a90dff5) My color edit changed the parameter "activity" to unused.  Line 143.
![image](https://github.com/user-attachments/assets/9de4c5e2-ef70-4d01-b44c-c0d1ce89c033).

But other than that. were ok.
![image](https://github.com/user-attachments/assets/7d09414e-d6e0-48df-ab1e-e1a46c269b8a)
![image](https://github.com/user-attachments/assets/7ca790ba-9b02-4bba-a603-772b0698953d)



author_association: CONTRIBUTOR
user: login: 0x41head
created_at: 2025-05-08T20:57:16Z
body: LGTM! Thanks for the work on this PR @aguero-tech :+1: 
author_association: COLLABORATOR