Dashboard: Dark Mode mit manuellem Umschalter, in localStorage gemerkt

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01M8BG6rcfV94au1CrMNQq9E

app/templates/app/dashboard.html

@@ -6,31 +6,73 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="{% static 'app/css/bootstrap.css' %}?v={{ STATIC_VERSION }}">
     <title>PioMint – Nutzung</title>
+    <script>
+        // Theme so früh wie möglich setzen - sonst blitzt beim Laden kurz
+        // das helle Theme auf, bevor auf Dunkel umgeschaltet wird.
+        (function () {
+            try {
+                var saved = localStorage.getItem("piomintDashboardTheme");
+                var theme = saved || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+                document.documentElement.setAttribute("data-theme", theme);
+            } catch (e) {}
+        })();
+    </script>
     <style>
+        :root {
+            --bg: #f4f6f5; --card-bg: #ffffff; --ink: #212529; --ink-muted: #6c757d;
+            --border: #dee2e6; --stripe: rgba(0, 0, 0, .05); --accent: rgb(120, 170, 86);
+            --shadow: 0 0 0.5rem gray;
+        }
+        :root[data-theme="dark"] {
+            --bg: #15171a; --card-bg: #1f2124; --ink: #e8e8e6; --ink-muted: #9a9d9f;
+            --border: rgba(255, 255, 255, .12); --stripe: rgba(255, 255, 255, .04); --accent: rgb(140, 195, 100);
+            --shadow: 0 0 0.6rem rgba(0, 0, 0, .5);
+        }
         body {
-            background-color: #f4f6f5;
+            background-color: var(--bg);
+            color: var(--ink);
             padding: 2rem 1rem 3rem 1rem;
         }
         h1 b {
-            color: rgb(120, 170, 86);
+            color: var(--accent);
+        }
+        .theme-toggle {
+            width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid var(--border);
+            background: var(--card-bg); display: inline-flex; align-items: center; justify-content: center;
+            font-size: 1rem; cursor: pointer; margin-left: .5rem;
         }
         .stat-card {
-            background: white;
+            background: var(--card-bg);
             border-radius: 1rem;
-            box-shadow: 0 0 0.5rem gray;
+            box-shadow: var(--shadow);
             padding: 1.25rem;
         }
         .stat-card.text-center .stat-value {
             font-size: 2rem;
             font-weight: bold;
-            color: rgb(120, 170, 86);
+            color: var(--accent);
         }
         .stat-card .stat-label {
-            color: #6c757d;
+            color: var(--ink-muted);
             font-size: 0.9rem;
         }
         .stat-card table {
-            background: white;
+            background: var(--card-bg);
+            color: var(--ink);
+        }
+        [data-theme="dark"] .text-muted {
+            color: var(--ink-muted) !important;
+        }
+        [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
+            background-color: var(--stripe);
+        }
+        [data-theme="dark"] .table td,
+        [data-theme="dark"] .table th,
+        [data-theme="dark"] .border-bottom {
+            border-color: var(--border) !important;
+        }
+        [data-theme="dark"] code {
+            color: #f092c0;
         }
     </style>
 </head>
@@ -38,7 +80,10 @@
     <div class="container" style="max-width: 960px;">
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h1 class="m-0">PIO<b>MINT</b> – Nutzung</h1>
-            <a href="/app/home/" class="btn btn-sm btn-light">Zur App</a>
+            <div>
+                <a href="/app/home/" class="btn btn-sm btn-light">Zur App</a>
+                <button type="button" class="theme-toggle" aria-label="Hell/Dunkel umschalten" title="Hell/Dunkel umschalten">🌙</button>
+            </div>
         </div>
 
         <div class="row g-3 mb-3">
@@ -185,5 +230,20 @@
             gespeicherte ID ohne Bezug zu einer Person. Ein Signal pro Gerät und Tag.
         </p>
     </div>
+    <script>
+        (function () {
+            var button = document.querySelector(".theme-toggle");
+            function paint() {
+                button.textContent = document.documentElement.getAttribute("data-theme") === "dark" ? "☀️" : "🌙";
+            }
+            paint();
+            button.addEventListener("click", function () {
+                var next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
+                document.documentElement.setAttribute("data-theme", next);
+                try { localStorage.setItem("piomintDashboardTheme", next); } catch (e) {}
+                paint();
+            });
+        })();
+    </script>
 </body>
 </html>