🎨 feat: update mindmap templates and JS module for improved UI design

templates/base.html

@@ -627,37 +627,42 @@
         });
     </script>
 
-    <!-- Dark/Light-Mode persistent und robust -->
+    <!-- Dark/Light-Mode vereinheitlicht -->
     <script>
-      (function() {
-        function applyMode(mode) {
-          if (mode === 'dark') {
+      // Globaler Zugriff für externe Skripte
+      window.MindMap = window.MindMap || {};
+      
+      window.MindMap.toggleDarkMode = function() {
+        // Alpine.js-Instanz benutzen, wenn verfügbar
+        const appEl = document.querySelector('body');
+        if (appEl && appEl.__x) {
+          appEl.__x.$data.toggleDarkMode();
+        } else {
+          // Fallback: Nur classList und localStorage
+          const isDark = document.documentElement.classList.contains('dark');
+          document.documentElement.classList.toggle('dark', !isDark);
+          document.body.classList.toggle('dark', !isDark);
+          localStorage.setItem('colorMode', !isDark ? 'dark' : 'light');
+          
+          // Server aktualisieren
+          fetch('/api/set_dark_mode', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ darkMode: !isDark })
+          }).catch(console.error);
+        }
+      };
+      
+      // Fallback für Browser-Präferenz, falls keine Einstellung geladen werden konnte
+      document.addEventListener('DOMContentLoaded', function() {
+        if (!document.body.classList.contains('dark') && !document.documentElement.classList.contains('dark')) {
+          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+          if (prefersDark) {
             document.documentElement.classList.add('dark');
-            localStorage.setItem('colorMode', 'dark');
-          } else {
-            document.documentElement.classList.remove('dark');
-            localStorage.setItem('colorMode', 'light');
+            document.body.classList.add('dark');
           }
         }
-        // Beim Laden: Präferenz aus localStorage oder System übernehmen
-        const stored = localStorage.getItem('colorMode');
-        if (stored === 'dark' || stored === 'light') {
-          applyMode(stored);
-        } else {
-          // Systempräferenz als Fallback
-          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-          applyMode(prefersDark ? 'dark' : 'light');
-        }
-        // Umschalter für alle Mode-Toggles
-        window.toggleColorMode = function() {
-          const isDark = document.documentElement.classList.contains('dark');
-          applyMode(isDark ? 'light' : 'dark');
-        };
-        // Optional: globales Event für andere Skripte
-        window.addEventListener('storage', function(e) {
-          if (e.key === 'colorMode') applyMode(e.newValue);
-        });
-      })();
+      });
     </script>
 </body>
 </html>