From 3fb6051e4ae1828a7839c8dffb53814ddef09499 Mon Sep 17 00:00:00 2001
From: Eric Neuber <eric@skax.de>
Date: Wed, 14 Jan 2026 18:41:57 +0100
Subject: [PATCH] =?UTF-8?q?Darkmode=20eingef=C3=BChrt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/script.js        |   7 ++
 static/settings.js      |  14 ++++
 static/style.css        | 155 +++++++++++++++++++++++++++++++---------
 templates/settings.html |   4 ++
 4 files changed, 146 insertions(+), 34 deletions(-)

diff --git a/static/script.js b/static/script.js
index 14dba41..3739c6f 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,5 +1,11 @@
 // Sortiere die Tabelle nach Adresse (addr) beim Laden der Seite
 document.addEventListener('DOMContentLoaded', function() {
+    // Darkmode-Status aus localStorage übernehmen
+    if (localStorage.getItem('darkmode') === 'true') {
+        document.body.classList.add('darkmode');
+    } else {
+        document.body.classList.remove('darkmode');
+    }
     const tableBody = document.getElementById('tableBody');
     if (tableBody) {
         // Extrahiere alle Zeilen und deren addr
@@ -73,6 +79,7 @@ function addRow() {
     tableBody.appendChild(newRow);
 }
 
+
 function deleteRow(button) {
     const row = button.closest('tr');
     if (confirm('Möchten Sie diese Zeile wirklich löschen?')) {
diff --git a/static/settings.js b/static/settings.js
index cf727a4..16f2493 100644
--- a/static/settings.js
+++ b/static/settings.js
@@ -69,3 +69,17 @@ async function saveSettings() {
         messageDiv.textContent = '✗ Verbindungsfehler!';
     }
 }
+
+// Darkmode Toggle
+document.addEventListener('DOMContentLoaded', function() {
+    const btn = document.getElementById('darkmode-toggle');
+    if (!btn) return;
+    // Initialer Zustand aus LocalStorage
+    if (localStorage.getItem('darkmode') === 'true') {
+        document.body.classList.add('darkmode');
+    }
+    btn.addEventListener('click', function() {
+        document.body.classList.toggle('darkmode');
+        localStorage.setItem('darkmode', document.body.classList.contains('darkmode'));
+    });
+});
diff --git a/static/style.css b/static/style.css
index 12ebc16..42e3549 100644
--- a/static/style.css
+++ b/static/style.css
@@ -4,11 +4,98 @@
     box-sizing: border-box;
 }
 
+:root {
+    --background: #fff;
+    --background-alt: #f9f9f9;
+    --container-bg: #fff;
+    --header-bg: #fff;
+    --primary: #667eea;
+    --primary-dark: #764ba2;
+    --text: #111;
+    --text-light: #333;
+    --nav-link: #666;
+    --nav-link-hover: #f0f0f0;
+    --table-header: #667eea;
+    --table-header-border: #5568d3;
+    --table-row-hover: #f8f9ff;
+    --input-border: #e0e0e0;
+    --input-focus: #667eea;
+    --button-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --button-gradient-alt: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+    --delete-btn: #f44336;
+    --delete-btn-hover: #da190b;
+    --success-bg: #d4edda;
+    --success-text: #155724;
+    --success-border: #c3e6cb;
+    --error-bg: #f8d7da;
+    --error-text: #721c24;
+    --error-border: #f5c6cb;
+}
+
+body.darkmode, body.darkmode :root {
+    --background: #181a1b;
+    --background-alt: #23272b;
+    --container-bg: #23272b;
+    --header-bg: #23272b;
+    --primary: #3399ff;
+    --primary-dark: #1a2a3a;
+    --text: #eee;
+    --text-light: #bbb;
+    --nav-link: #bbb;
+    --nav-link-hover: #222;
+    --table-header: #222e3a;
+    --table-header-border: #3399ff;
+    --table-row-hover: #23272b;
+    --input-border: #444;
+    --input-focus: #3399ff;
+    --button-gradient: linear-gradient(135deg, #3399ff 0%, #1a2a3a 100%);
+    --button-gradient-alt: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
+    --delete-btn: #b71c1c;
+    --delete-btn-hover: #7f0000;
+    --success-bg: #234d2c;
+    --success-text: #b9f6ca;
+    --success-border: #388e3c;
+    --error-bg: #4a2323;
+    --error-text: #ff8a80;
+    --error-border: #b71c1c;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #181a1b;
+        --background-alt: #23272b;
+        --container-bg: #23272b;
+        --header-bg: #23272b;
+        --primary: #3399ff;
+        --primary-dark: #1a2a3a;
+        --text: #eee;
+        --text-light: #bbb;
+        --nav-link: #bbb;
+        --nav-link-hover: #222;
+        --table-header: #222e3a;
+        --table-header-border: #3399ff;
+        --table-row-hover: #23272b;
+        --input-border: #444;
+        --input-focus: #3399ff;
+        --button-gradient: linear-gradient(135deg, #3399ff 0%, #1a2a3a 100%);
+        --button-gradient-alt: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
+        --delete-btn: #b71c1c;
+        --delete-btn-hover: #7f0000;
+        --success-bg: #234d2c;
+        --success-text: #b9f6ca;
+        --success-border: #388e3c;
+        --error-bg: #4a2323;
+        --error-text: #ff8a80;
+        --error-border: #b71c1c;
+    }
+}
+
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--background);
     min-height: 100vh;
     padding-top: 80px;
+    color: var(--text);
 }
 
 /* Header Styles */
@@ -17,7 +104,7 @@ body {
     top: 0;
     left: 0;
     right: 0;
-    background: white;
+    background: var(--header-bg);
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     z-index: 1000;
 }
@@ -40,7 +127,7 @@ body {
 .logo-text {
     font-size: 20px;
     font-weight: 700;
-    color: #333;
+    color: var(--text-light);
 }
 
 .nav {
@@ -51,20 +138,20 @@ body {
 .nav-link {
     padding: 10px 20px;
     text-decoration: none;
-    color: #666;
+    color: var(--nav-link);
     border-radius: 6px;
     transition: all 0.3s;
     font-weight: 500;
 }
 
 .nav-link:hover {
-    background-color: #f0f0f0;
-    color: #333;
+    background-color: var(--nav-link-hover);
+    color: var(--text-light);
 }
 
 .nav-link.active {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
+    background: var(--button-gradient);
+    color: #fff;
 }
 
 /* Container */
@@ -72,23 +159,23 @@ body {
     max-width: 1400px;
     margin: 30px auto;
     padding: 30px;
-    background-color: white;
+    background-color: var(--container-bg);
     border-radius: 12px;
     box-shadow: 0 10px 40px rgba(0,0,0,0.2);
 }
 
 h1 {
-    color: #333;
+    color: var(--text-light);
     text-align: center;
     margin-bottom: 30px;
     font-size: 28px;
 }
 
 h2 {
-    color: #333;
+    color: var(--text-light);
     margin-bottom: 20px;
     font-size: 20px;
-    border-bottom: 2px solid #667eea;
+    border-bottom: 2px solid var(--primary);
     padding-bottom: 10px;
 }
 
@@ -101,31 +188,31 @@ h2 {
 table {
     width: 100%;
     border-collapse: collapse;
-    background-color: white;
+    background-color: var(--container-bg);
 }
 
 th {
-    background-color: #667eea;
-    color: white;
+    background-color: var(--table-header);
+    color: #fff;
     padding: 15px;
     text-align: left;
     font-weight: 600;
-    border: 1px solid #5568d3;
+    border: 1px solid var(--table-header-border);
 }
 
 td {
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--input-border);
     padding: 12px;
 }
 
 tr:hover {
-    background-color: #f8f9ff;
+    background-color: var(--table-row-hover);
 }
 
 .text-input {
     width: 100%;
     padding: 8px 12px;
-    border: 2px solid #e0e0e0;
+    border: 2px solid var(--input-border);
     border-radius: 6px;
     box-sizing: border-box;
     font-size: 14px;
@@ -134,7 +221,7 @@ tr:hover {
 
 .text-input:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: var(--input-focus);
 }
 
 /* Toggle Switch */
@@ -197,8 +284,8 @@ input:checked + .slider:before {
 
 .save-btn, .add-btn {
     padding: 14px 30px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
+    background: var(--button-gradient);
+    color: #fff;
     border: none;
     border-radius: 8px;
     cursor: pointer;
@@ -217,13 +304,13 @@ input:checked + .slider:before {
 }
 
 .add-btn {
-    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+    background: var(--button-gradient-alt);
 }
 
 .delete-btn {
     padding: 8px 12px;
-    background-color: #f44336;
-    color: white;
+    background-color: var(--delete-btn);
+    color: #fff;
     border: none;
     border-radius: 6px;
     cursor: pointer;
@@ -232,7 +319,7 @@ input:checked + .slider:before {
 }
 
 .delete-btn:hover {
-    background-color: #da190b;
+    background-color: var(--delete-btn-hover);
 }
 
 /* Messages */
@@ -246,16 +333,16 @@ input:checked + .slider:before {
 }
 
 .message.success {
-    background-color: #d4edda;
-    color: #155724;
-    border: 1px solid #c3e6cb;
+    background-color: var(--success-bg);
+    color: var(--success-text);
+    border: 1px solid var(--success-border);
     display: block;
 }
 
 .message.error {
-    background-color: #f8d7da;
-    color: #721c24;
-    border: 1px solid #f5c6cb;
+    background-color: var(--error-bg);
+    color: var(--error-text);
+    border: 1px solid var(--error-border);
     display: block;
 }
 
@@ -263,7 +350,7 @@ input:checked + .slider:before {
 .settings-section {
     margin-bottom: 40px;
     padding: 20px;
-    background-color: #f9f9f9;
+    background-color: var(--background-alt);
     border-radius: 8px;
 }
 
@@ -274,7 +361,7 @@ input:checked + .slider:before {
 .form-group label {
     display: block;
     margin-bottom: 8px;
-    color: #333;
+    color: var(--text-light);
     font-weight: 500;
 }
 
diff --git a/templates/settings.html b/templates/settings.html
index 8522523..55c2c60 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -27,6 +27,7 @@
 
     <div class="container">
 
+
         <h1>⚙️ Einstellungen</h1>
         <div id="message" class="message"></div>
 
@@ -40,6 +41,9 @@
                     <option value="WARN">WARN</option>
                     <option value="ERROR">ERROR</option>
                 </select>
+                </div>
+                <div class="form-group" style="text-align:right;">
+                    <button id="darkmode-toggle" class="add-btn" type="button">🌙 Darkmode umschalten</button>
             </div>
         </div>