From e21a2fc1c558e0e8fe125880e3190745380dc151 Mon Sep 17 00:00:00 2001
From: troogs <gitea@beging.de>
Date: Fri, 3 Apr 2026 14:51:45 +0200
Subject: [PATCH] refactor(app): add theme toggle functionality and improve
 theme management

---
 .../Components/Layout/MainLayout.razor        |   2 +-
 src/Duempelkas.App/Pages/Dashboard.razor      |   3 +
 src/Duempelkas.App/Pages/Dashboard.razor.cs   |  42 +++++++
 src/Duempelkas.Desktop/wwwroot/css/app.css    |  20 +++-
 src/Duempelkas.Desktop/wwwroot/index.html     | 106 +++++++++++++++++-
 5 files changed, 169 insertions(+), 4 deletions(-)

diff --git a/src/Duempelkas.App/Components/Layout/MainLayout.razor b/src/Duempelkas.App/Components/Layout/MainLayout.razor
index 82d26b2..9459772 100644
--- a/src/Duempelkas.App/Components/Layout/MainLayout.razor
+++ b/src/Duempelkas.App/Components/Layout/MainLayout.razor
@@ -22,7 +22,7 @@
         <div class="dialog-content" @onclick:stopPropagation="true">
             <h5>Über Dümpelkas &middot; Version @AppVersion</h5>
             <p class="mb-2">Entwickler: Andre Beging</p>
-            <p class="mb-3">E-Mail: <a href="mailto:mail@beging.de" style="color: white;">mail@beging.de</a></p>
+            <p class="mb-3">E-Mail: <a href="mailto:mail@beging.de" style="color: var(--color-text);">mail@beging.de</a></p>
             <div class="d-flex justify-content-end">
                 <button type="button" class="btn btn-outline-secondary" @onclick="CloseAboutDialog">
                     <i class="bi bi-x-lg"></i> Schließen
diff --git a/src/Duempelkas.App/Pages/Dashboard.razor b/src/Duempelkas.App/Pages/Dashboard.razor
index 64b893d..9a04784 100644
--- a/src/Duempelkas.App/Pages/Dashboard.razor
+++ b/src/Duempelkas.App/Pages/Dashboard.razor
@@ -39,6 +39,9 @@
         <button class="btn btn-nav btn-primary" @onclick="OpenYearFilterDialog">
             <i class="bi bi-funnel"></i> Ansicht<br>@GetFilterLabel()
         </button>
+        <button class="btn btn-nav btn-secondary" @onclick="ToggleThemeAsync" title="Farbmodus wechseln">
+            <i class="@ThemeButtonIconClass"></i> Modus<br>@ThemeButtonLabel
+        </button>
     </div>
 
     @if (accounts != null && accounts.Any())
diff --git a/src/Duempelkas.App/Pages/Dashboard.razor.cs b/src/Duempelkas.App/Pages/Dashboard.razor.cs
index 88c801c..6bb3fc1 100644
--- a/src/Duempelkas.App/Pages/Dashboard.razor.cs
+++ b/src/Duempelkas.App/Pages/Dashboard.razor.cs
@@ -1,5 +1,7 @@
 using System.Globalization;
 using Duempelkas.App.Services.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 
 namespace Duempelkas.App.Pages;
 
@@ -18,6 +20,7 @@ public partial class Dashboard
     private string? operationMessage;
     private string operationMessageClass = "alert-info";
     private string? savedPdfPath;
+    private string currentTheme = "light";
 
     #endregion
 
@@ -37,6 +40,26 @@ public partial class Dashboard
         await LoadAll();
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        try
+        {
+            currentTheme = await JS.InvokeAsync<string>("duempelkasThemeGetCurrentTheme");
+        }
+        catch (JSException)
+        {
+            // Keep default light mode when JS interop is not ready or unavailable.
+            currentTheme = "light";
+        }
+
+        StateHasChanged();
+    }
+
     #endregion
 
     #region Data Loading
@@ -167,5 +190,24 @@ public partial class Dashboard
 
     private string GetFilterLabel() => selectedYear?.ToString() ?? "Alle";
 
+    private string ThemeButtonLabel => currentTheme == "dark" ? "Hell" : "Dunkel";
+
+    private string ThemeButtonIconClass => currentTheme == "dark" ? "bi bi-sun" : "bi bi-moon-stars";
+
+    private async Task ToggleThemeAsync()
+    {
+        try
+        {
+            currentTheme = await JS.InvokeAsync<string>("duempelkasThemeToggleTheme");
+        }
+        catch (JSException)
+        {
+            currentTheme = currentTheme == "dark" ? "light" : "dark";
+        }
+    }
+
+    [Inject]
+    private IJSRuntime JS { get; set; } = default!;
+
     #endregion
 }
diff --git a/src/Duempelkas.Desktop/wwwroot/css/app.css b/src/Duempelkas.Desktop/wwwroot/css/app.css
index e2ac6ac..366d9fa 100644
--- a/src/Duempelkas.Desktop/wwwroot/css/app.css
+++ b/src/Duempelkas.Desktop/wwwroot/css/app.css
@@ -1,9 +1,19 @@
-/* Duempelkas App Styles – Dark Mode */
+/* Duempelkas App Styles */
 
 :root {
     --color-income: #4ade80;
     --color-expense: #f87171;
     --color-transfer: #60a5fa;
+    --color-bg: #ddd;
+    --color-surface: #ffffff;
+    --color-surface-hover: #f1f5f9;
+    --color-border: #d9e2ef;
+    --color-text: #0f172a;
+    --color-text-muted: #64748b;
+    --color-accent: #4f46e5;
+}
+
+html[data-ui-theme="dark"] {
     --color-bg: #1a1a2e;
     --color-surface: #16213e;
     --color-surface-hover: #1e2d4a;
@@ -311,7 +321,7 @@ html, body {
 .btn-dark {
     background-color: #334155;
     border-color: #475569;
-    color: var(--color-text);
+    color: #f8fafc;
 }
 
 .btn-dark:hover {
@@ -319,6 +329,12 @@ html, body {
     border-color: #64748b;
 }
 
+html[data-ui-theme="light"] .btn-dark {
+    background-color: #334155;
+    border-color: #334155;
+    color: #f8fafc;
+}
+
 /* Table */
 .table {
     --bs-table-bg: transparent;
diff --git a/src/Duempelkas.Desktop/wwwroot/index.html b/src/Duempelkas.Desktop/wwwroot/index.html
index 15e7fcf..2f14137 100644
--- a/src/Duempelkas.Desktop/wwwroot/index.html
+++ b/src/Duempelkas.Desktop/wwwroot/index.html
@@ -1,9 +1,113 @@
 <!DOCTYPE html>
-<html lang="de" data-bs-theme="dark">
+<html lang="de">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
+    <script>
+        (function () {
+            function getCookie(name) {
+                var parts = document.cookie ? document.cookie.split(';') : [];
+                for (var i = 0; i < parts.length; i++) {
+                    var part = parts[i].trim();
+                    if (part.indexOf(name + '=') === 0) {
+                        return decodeURIComponent(part.substring(name.length + 1));
+                    }
+                }
+
+                return null;
+            }
+
+            function setCookie(name, value) {
+                document.cookie = name + '=' + encodeURIComponent(value) + '; path=/; max-age=31536000; samesite=lax';
+            }
+
+            function getStoredTheme() {
+                try {
+                    var fromStorage = localStorage.getItem('duempelkas-theme');
+                    if (fromStorage === 'light' || fromStorage === 'dark') {
+                        return fromStorage;
+                    }
+                } catch (_) {
+                    // Ignore storage access issues and fall back to cookies/system.
+                }
+
+                var fromCookie = getCookie('duempelkas-theme');
+                if (fromCookie === 'light' || fromCookie === 'dark') {
+                    return fromCookie;
+                }
+
+                return null;
+            }
+
+            function detectSystemTheme() {
+                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    return 'dark';
+                }
+
+                return 'light';
+            }
+
+            function normalizeTheme(value) {
+                return value === 'dark' ? 'dark' : 'light';
+            }
+
+            function applyTheme(theme, persist) {
+                var resolved = normalizeTheme(theme);
+                document.documentElement.setAttribute('data-ui-theme', resolved);
+                document.documentElement.setAttribute('data-bs-theme', resolved);
+                if (document.body) {
+                    document.body.setAttribute('data-ui-theme', resolved);
+                    document.body.setAttribute('data-bs-theme', resolved);
+                }
+
+                if (persist) {
+                    try {
+                        localStorage.setItem('duempelkas-theme', resolved);
+                    } catch (_) {
+                        // Ignore storage access issues and keep cookie as fallback.
+                    }
+
+                    setCookie('duempelkas-theme', resolved);
+                }
+
+                return resolved;
+            }
+
+            var initialTheme = getStoredTheme() || detectSystemTheme() || 'light';
+            applyTheme(initialTheme, false);
+
+            var duempelkasThemeGetCurrentTheme = function () {
+                var current = document.documentElement.getAttribute('data-ui-theme');
+                return normalizeTheme(current);
+            };
+
+            var duempelkasThemeSetTheme = function (theme) {
+                return applyTheme(theme, true);
+            };
+
+            var duempelkasThemeToggleTheme = function () {
+                var current = document.documentElement.getAttribute('data-ui-theme');
+                var next = current === 'dark' ? 'light' : 'dark';
+                return applyTheme(next, true);
+            };
+
+            globalThis.duempelkasThemeGetCurrentTheme = duempelkasThemeGetCurrentTheme;
+            globalThis.duempelkasThemeSetTheme = duempelkasThemeSetTheme;
+            globalThis.duempelkasThemeToggleTheme = duempelkasThemeToggleTheme;
+
+            window.duempelkasThemeGetCurrentTheme = duempelkasThemeGetCurrentTheme;
+            window.duempelkasThemeSetTheme = duempelkasThemeSetTheme;
+            window.duempelkasThemeToggleTheme = duempelkasThemeToggleTheme;
+
+            // Keep object-style API for compatibility with older calls.
+            window.duempelkasTheme = {
+                getCurrentTheme: duempelkasThemeGetCurrentTheme,
+                setTheme: duempelkasThemeSetTheme,
+                toggleTheme: duempelkasThemeToggleTheme
+            };
+        })();
+    </script>
     <title>Dümpelkas – Kassenbuch</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
           rel="stylesheet"