endlich funktionierender Darkmodus

static/settings.js

@@ -8,11 +8,20 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (el) {
                     if (config && config.default && (config.default.darkmode === true || config.default.darkmode === 'true')) {
                         el.checked = true;
+                        document.body.classList.add('darkmode');
                     } else {
                         el.checked = false;
+                        document.body.classList.remove('darkmode');
                     }
+                    // Event Listener für Umschalten
+                    el.addEventListener('change', function() {
+                        if (el.checked) {
+                            document.body.classList.add('darkmode');
+                        } else {
+                            document.body.classList.remove('darkmode');
+                        }
+                    });
                 } else {
-                    // Falls das Element noch nicht existiert, erneut versuchen
                     setTimeout(setSwitch, 50);
                 }
             }
@@ -78,14 +87,16 @@ async function saveSettings() {
         if (response.ok) {
             messageDiv.className = 'message success';
             messageDiv.textContent = '✓ Einstellungen erfolgreich gespeichert!';
+            setTimeout(() => {
+                window.location.reload();
+            }, 1000);
         } else {
             messageDiv.className = 'message error';
             messageDiv.textContent = '✗ Fehler beim Speichern der Einstellungen!';
+            setTimeout(() => {
+                messageDiv.style.display = 'none';
+            }, 3000);
         }
-
-        setTimeout(() => {
-            messageDiv.style.display = 'none';
-        }, 3000);
     } catch (error) {
         const messageDiv = document.getElementById('message');
         messageDiv.className = 'message error';

static/style.css

@@ -32,7 +32,7 @@
     --error-border: #f5c6cb;
 }
 
-body.darkmode, body.darkmode :root {
+body.darkmode {
     --background: #181a1b;
     --background-alt: #23272b;
     --container-bg: #23272b;
@@ -60,35 +60,6 @@ body.darkmode, body.darkmode :root {
     --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;