From 0923567b346ab8cea0810bdf249657278343a9cd Mon Sep 17 00:00:00 2001
From: meldaravaniel <code.capsize865@passmail.net>
Date: Sun, 12 Apr 2026 23:27:59 -0700
Subject: [PATCH] feat(darkness): because light mode is for monsters

---
 web/angular/src/app/app.component.html |  4 ++++
 web/angular/src/app/app.component.ts   | 17 ++++++++++++++++-
 web/angular/src/material-theme.scss    |  3 ++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/web/angular/src/app/app.component.html b/web/angular/src/app/app.component.html
index 4a05887..a3777ea 100644
--- a/web/angular/src/app/app.component.html
+++ b/web/angular/src/app/app.component.html
@@ -10,6 +10,10 @@
   <a routerLink="/docs"   routerLinkActive="active" class="nav-link" mat-button>Docs</a>
   <a routerLink="/config" routerLinkActive="active" class="nav-link" mat-button>Configure</a>
 
+  <button mat-icon-button (click)="toggleDarkMode()" [attr.aria-label]="darkMode ? 'Switch to light mode' : 'Switch to dark mode'" title="{{ darkMode ? 'Light mode' : 'Dark mode' }}">
+    <mat-icon>{{ darkMode ? 'light_mode' : 'dark_mode' }}</mat-icon>
+  </button>
+
   <div class="nav-status">
     <span class="status-dot" [ngClass]="'status-' + (api.status$ | async)"></span>
     <span>{{ api.status$ | async }}</span>
diff --git a/web/angular/src/app/app.component.ts b/web/angular/src/app/app.component.ts
index dad35c7..bf704b5 100644
--- a/web/angular/src/app/app.component.ts
+++ b/web/angular/src/app/app.component.ts
@@ -3,18 +3,33 @@ import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 import { AsyncPipe, NgClass } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { ApiService } from './api.service';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive, AsyncPipe, NgClass, MatToolbarModule, MatButtonModule],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, AsyncPipe, NgClass, MatToolbarModule, MatButtonModule, MatIconModule],
   templateUrl: './app.component.html',
 })
 export class AppComponent implements OnInit {
+  darkMode = false;
+
   constructor(public api: ApiService) {}
 
   ngOnInit(): void {
     this.api.refreshStatus();
+    this.darkMode = localStorage.getItem('darkMode') === 'true';
+    this.applyTheme();
+  }
+
+  toggleDarkMode(): void {
+    this.darkMode = !this.darkMode;
+    localStorage.setItem('darkMode', String(this.darkMode));
+    this.applyTheme();
+  }
+
+  private applyTheme(): void {
+    document.body.style.colorScheme = this.darkMode ? 'dark' : 'light';
   }
 }
diff --git a/web/angular/src/material-theme.scss b/web/angular/src/material-theme.scss
index 6b9f35c..133f75c 100644
--- a/web/angular/src/material-theme.scss
+++ b/web/angular/src/material-theme.scss
@@ -7,6 +7,7 @@
 @use '@angular/material' as mat;
 
 html {
+  color-scheme: light dark;
   height: 100%;
   @include mat.theme((
     color: (
@@ -91,7 +92,7 @@ body {
   background: var(--mat-sys-surface-variant);
   color: var(--mat-sys-on-surface-variant);
 
-  &.feedback-success { background: color-mix(in srgb, #4caf50 15%, transparent); color: #1b5e20; }
+  &.feedback-success { background: color-mix(in srgb, #4caf50 15%, transparent); color: color-mix(in srgb, #4caf50 80%, var(--mat-sys-on-surface)); }
   &.feedback-error   { background: color-mix(in srgb, var(--mat-sys-error) 12%, transparent); color: var(--mat-sys-error); }
 }