chore: Änderungen commited

templates/base.html

@@ -285,6 +285,7 @@
         this.darkMode = !this.darkMode;
         this.applyDarkMode();
         
+        // Server über Änderung informieren
         fetch('/api/set_dark_mode', {
             method: 'POST',
             headers: {
@@ -295,11 +296,10 @@
         .then(response => response.json())
         .then(data => {
             if (data.success) {
+                // Event auslösen für andere Komponenten
                 document.dispatchEvent(new CustomEvent('darkModeToggled', { 
                     detail: { isDark: this.darkMode } 
                 }));
-            } else {
-                console.error('Fehler beim Speichern der Dark Mode-Einstellung:', data.error);
             }
         })
         .catch(error => {
@@ -365,13 +365,16 @@
                 <div class="flex items-center space-x-4">
                     <!-- Dark/Light Mode Schalter -->
                     <button
-                        @click="darkMode = !darkMode; toggleDarkMode()"
+                        @click="toggleDarkMode()"
                         class="theme-toggle relative w-12 h-6 rounded-full bg-gradient-to-r transition-all duration-300 flex items-center"
                         :class="darkMode ? 'from-purple-700 to-indigo-800' : 'from-purple-400 to-indigo-500'"
                         aria-label="Dark Mode umschalten"
                     >
-                        <span class="absolute w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-300"
-                              :class="darkMode ? 'translate-x-7' : 'translate-x-1'"></span>
+                        <span 
+                            class="absolute w-5 h-5 rounded-full bg-white shadow-md transform transition-transform duration-300"
+                            :class="darkMode ? 'translate-x-7' : 'translate-x-1'"
+                        ></span>
+                        <span class="sr-only">{{ darkMode ? 'Zum Light Mode wechseln' : 'Zum Dark Mode wechseln' }}</span>
                     </button>
                     <!-- Profil-Link oder Login -->
                     {% if current_user.is_authenticated %}
@@ -700,15 +703,34 @@
       }
       
       window.MindMap.toggleDarkMode = function() {
-        const isDark = document.body.classList.contains('dark');
-        applyDarkModeClasses(!isDark);
+        const isDark = document.documentElement.classList.contains('dark');
+        const newIsDark = !isDark;
+        
+        // DOM aktualisieren
+        applyDarkModeClasses(newIsDark);
+        
+        // Alpine.js Status aktualisieren (falls verfügbar)
+        const appEl = document.querySelector('body');
+        if (appEl && appEl.__x) {
+          appEl.__x.$data.darkMode = newIsDark;
+        }
         
         // Server aktualisieren
         fetch('/api/set_dark_mode', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ darkMode: !isDark })
-        }).catch(console.error);
+          body: JSON.stringify({ darkMode: newIsDark })
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            // Event für andere Komponenten auslösen
+            document.dispatchEvent(new CustomEvent('darkModeToggled', { 
+              detail: { isDark: newIsDark } 
+            }));
+          }
+        })
+        .catch(console.error);
       };
       
       // Initialisierung beim Laden