fixed dark mode

dhcpdns/dhcpinfo/templates/templates/leases.html

@@ -16,6 +16,131 @@
             background-color: #f5f5f5;
             color: #222;
         }
+        /* System Darkmode Support */
+        @media (prefers-color-scheme: dark) {
+            body {
+                background-color: #181a1b !important;
+                color: #e0e0e0 !important;
+            }
+            .container {
+                background: #23272e !important;
+                color: #e0e0e0 !important;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.5);
+            }
+            .header {
+                background: linear-gradient(135deg, #232b4a 0%, #3a2a4d 100%) !important;
+                color: #fff !important;
+            }
+            .connection-status {
+                background: #23272e !important;
+                border-bottom: 1px solid #333 !important;
+                color: #b0b0b0 !important;
+            }
+            .stats {
+                background: #23272e !important;
+                border-bottom: 1px solid #333 !important;
+            }
+            .stat-card {
+                background: #181a1b !important;
+                color: #e0e0e0 !important;
+                box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
+            }
+            .controls {
+                background: #23272e !important;
+                border-bottom: 1px solid #333 !important;
+            }
+            .search-box {
+                background: #23272e !important;
+                color: #e0e0e0 !important;
+                border: 1px solid #444 !important;
+            }
+            table {
+                background: #23272e !important;
+                color: #e0e0e0 !important;
+            }
+            th {
+                background: #333 !important;
+                color: #fff !important;
+            }
+            tr:hover {
+                background-color: #232b33 !important;
+            }
+            .error {
+                background: #4b2323 !important;
+                color: #ffb3b3 !important;
+                border: 1px solid #a33 !important;
+            }
+            .server-info {
+                background: #232b33 !important;
+                border: 1px solid #444 !important;
+                color: #b0e0ff !important;
+            }
+        }
+        /* explizite .dark-mode-Klassen für JS-Umschaltung */
+        body.dark-mode {
+            background-color: #181a1b !important;
+            color: #e0e0e0 !important;
+        }
+        .container.dark-mode {
+            background: #23272e !important;
+            color: #e0e0e0 !important;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
+        }
+        .header.dark-mode {
+            background: linear-gradient(135deg, #232b4a 0%, #3a2a4d 100%) !important;
+            color: #fff !important;
+        }
+        .connection-status.dark-mode {
+            background: #23272e !important;
+            border-bottom: 1px solid #333 !important;
+            color: #b0b0b0 !important;
+        }
+        .stats.dark-mode {
+            background: #23272e !important;
+            border-bottom: 1px solid #333 !important;
+        }
+        .stat-card.dark-mode {
+            background: #181a1b !important;
+            color: #e0e0e0 !important;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
+        }
+        .controls.dark-mode {
+            background: #23272e !important;
+            border-bottom: 1px solid #333 !important;
+        }
+        .search-box.dark-mode {
+            background: #23272e !important;
+            color: #e0e0e0 !important;
+            border: 1px solid #444 !important;
+        }
+        table.dark-mode {
+            background: #23272e !important;
+            color: #e0e0e0 !important;
+        }
+        th.dark-mode {
+            background: #333 !important;
+            color: #fff !important;
+        }
+        tr.dark-mode:hover {
+            background-color: #232b33 !important;
+        }
+        .error.dark-mode {
+            background: #4b2323 !important;
+            color: #ffb3b3 !important;
+            border: 1px solid #a33 !important;
+        }
+        .server-info.dark-mode {
+            background: #232b33 !important;
+            border: 1px solid #444 !important;
+            color: #b0e0ff !important;
+        }
+        
+        body {
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+            color: #222;
+        }
         body.dark-mode {
             background-color: #181a1b !important;
             color: #e0e0e0 !important;
@@ -242,7 +367,7 @@
         }
     </style>
     <script>
-    // Dark mode toggle and persistence
+    // Dark mode toggle und Initialisierung
     function toggleDarkMode(force) {
         const isDarkMode = force !== undefined ? force : !document.body.classList.contains('dark-mode');
         if (isDarkMode) {