From 4fbdc1522adfcb6a6a568652201b8431f1b2ea7a Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Fri, 10 Apr 2026 23:56:29 +0200
Subject: [PATCH] #114 Dark Mode: CSS-Variables + Toggle + prefers-color-scheme
 + localStorage

---
 app/templates/index.html | 48 ++++++++++++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index 630052f..723423b 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -11,13 +11,24 @@
             --color-blue: #009da5;
             --color-lightgray: #bfbfbf;
             --color-bg: #f5f5f5;
+            --color-card: white;
+            --color-text: #5a5a5a;
+            --color-border: #e0e0e0;
+        }
+        [data-theme="dark"] {
+            --color-darkgray: #d0d0d0;
+            --color-bg: #1a1a2e;
+            --color-card: #16213e;
+            --color-text: #d0d0d0;
+            --color-lightgray: #2a2a4a;
+            --color-border: #333366;
         }
         
         * { box-sizing: border-box; margin: 0; padding: 0; }
         
         body {
             font-family: 'Avenir', 'Segoe UI', sans-serif;
-            color: var(--color-darkgray);
+            color: var(--color-text);
             line-height: 1.6;
             background: var(--color-bg);
             min-height: 100vh;
@@ -28,7 +39,7 @@
         
         /* Header */
         .header {
-            background: white;
+            background: var(--color-card);
             padding: 1rem 2rem;
             border-bottom: 1px solid var(--color-lightgray);
             display: flex;
@@ -52,7 +63,7 @@
             border: 1px solid var(--color-lightgray);
             border-radius: 4px;
             font-size: 0.9rem;
-            background: white;
+            background: var(--color-card);
             cursor: pointer;
         }
         
@@ -72,7 +83,7 @@
         .list-panel {
             width: 400px;
             min-width: 300px;
-            background: white;
+            background: var(--color-card);
             border-right: 1px solid var(--color-lightgray);
             display: flex;
             flex-direction: column;
@@ -127,7 +138,7 @@
             padding: 0.25rem 0.75rem;
             border: 1px solid var(--color-lightgray);
             border-radius: 20px;
-            background: white;
+            background: var(--color-card);
             cursor: pointer;
             font-size: 0.8rem;
         }
@@ -287,7 +298,7 @@
         }
         
         .detail-card {
-            background: white;
+            background: var(--color-card);
             border-radius: 8px;
             padding: 2rem;
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
@@ -463,7 +474,7 @@
         
         /* Upload Tab */
         .upload-section {
-            background: white;
+            background: var(--color-card);
             border-radius: 8px;
             padding: 2rem;
             max-width: 600px;
@@ -554,7 +565,7 @@
         }
         
         .mode-btn.active {
-            background: white;
+            background: var(--color-card);
             box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
 
@@ -563,7 +574,7 @@
             position: absolute;
             right: 0;
             top: 100%;
-            background: white;
+            background: var(--color-card);
             border: 1px solid #ddd;
             border-radius: 6px;
             box-shadow: 0 4px 12px rgba(0,0,0,0.15);
@@ -746,6 +757,8 @@
                     <button id="auth-btn" onclick="event.stopPropagation();">🔑 Anmelden</button>
                     <button onclick="event.stopPropagation();document.getElementById('register-panel').style.display='block';document.getElementById('hamburger-menu').classList.remove('open');">📝 Registrieren</button>
                     <button id="admin-pending-btn" style="display:none;" onclick="event.stopPropagation();showPendingUsers();document.getElementById('hamburger-menu').classList.remove('open');">👥 Freischaltungen</button>
+                    <hr style="margin:0.3rem 0;border:none;border-top:1px solid #eee;">
+                    <button onclick="event.stopPropagation();toggleDarkMode();">🌙 Dark Mode</button>
                 </div>
             </div>
         </div>
@@ -1089,6 +1102,23 @@
             }
         }
 
+        // Dark Mode (#114)
+        function toggleDarkMode() {
+            const current = document.documentElement.getAttribute('data-theme');
+            const next = current === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', next);
+            localStorage.setItem('theme', next);
+        }
+        // Beim Laden: System-Präferenz oder gespeicherte Wahl
+        (function() {
+            const saved = localStorage.getItem('theme');
+            if (saved) {
+                document.documentElement.setAttribute('data-theme', saved);
+            } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                document.documentElement.setAttribute('data-theme', 'dark');
+            }
+        })();
+
         // Hamburger-Menü schließen bei Klick außerhalb
         document.addEventListener('click', (e) => {
             const menu = document.getElementById('hamburger-menu');