📝 Commit Details:

backend/static/js/dark-mode-fix.js

@@ -0,0 +1,194 @@
+/**
+ * Dark Mode Toggle Fix - Premium Edition
+ * Diese Datei stellt sicher, dass der neue Premium Dark Mode Toggle Button korrekt funktioniert
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Dark Mode Toggle Button (Premium Design)
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    const html = document.documentElement;
+    
+    // Local Storage Key
+    const STORAGE_KEY = 'myp-dark-mode';
+    
+    /**
+     * Aktuellen Dark Mode Status aus Local Storage oder Systemeinstellung abrufen
+     */
+    function isDarkMode() {
+        const savedMode = localStorage.getItem(STORAGE_KEY);
+        if (savedMode !== null) {
+            return savedMode === 'true';
+        }
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    
+    /**
+     * Icons im Premium Toggle-Button aktualisieren
+     */
+    function updateIcons(isDark) {
+        if (!darkModeToggle) return;
+        
+        // Finde die Premium-Icons
+        const sunIcon = darkModeToggle.querySelector('.sun-icon');
+        const moonIcon = darkModeToggle.querySelector('.moon-icon');
+        
+        if (!sunIcon || !moonIcon) {
+            console.warn('Premium Dark Mode Icons nicht gefunden');
+            return;
+        }
+        
+        // Animation für Übergänge
+        if (isDark) {
+            // Dark Mode aktiviert - zeige Mond
+            sunIcon.style.opacity = '0';
+            sunIcon.style.transform = 'scale(0.75) rotate(90deg)';
+            moonIcon.style.opacity = '1';
+            moonIcon.style.transform = 'scale(1) rotate(0deg)';
+            
+            // CSS-Klassen für Dark Mode
+            sunIcon.classList.add('opacity-0', 'dark:opacity-0', 'scale-75', 'dark:scale-75', 'rotate-90', 'dark:rotate-90');
+            sunIcon.classList.remove('opacity-100', 'scale-100', 'rotate-0');
+            moonIcon.classList.add('opacity-100', 'dark:opacity-100', 'scale-100', 'dark:scale-100', 'rotate-0', 'dark:rotate-0');
+            moonIcon.classList.remove('opacity-0', 'scale-75', 'rotate-90');
+        } else {
+            // Light Mode aktiviert - zeige Sonne
+            sunIcon.style.opacity = '1';
+            sunIcon.style.transform = 'scale(1) rotate(0deg)';
+            moonIcon.style.opacity = '0';
+            moonIcon.style.transform = 'scale(0.75) rotate(-90deg)';
+            
+            // CSS-Klassen für Light Mode
+            sunIcon.classList.add('opacity-100', 'scale-100', 'rotate-0');
+            sunIcon.classList.remove('opacity-0', 'dark:opacity-0', 'scale-75', 'dark:scale-75', 'rotate-90', 'dark:rotate-90');
+            moonIcon.classList.add('opacity-0', 'dark:opacity-100', 'scale-75', 'dark:scale-100', 'rotate-90', 'dark:rotate-0');
+            moonIcon.classList.remove('opacity-100', 'scale-100', 'rotate-0');
+        }
+        
+        // Icon-Animationen hinzufügen
+        sunIcon.classList.toggle('icon-enter', !isDark);
+        moonIcon.classList.toggle('icon-enter', isDark);
+    }
+    
+    /**
+     * Premium Dark Mode aktivieren/deaktivieren
+     */
+    function setDarkMode(enable) {
+        console.log(`🎨 Setze Premium Dark Mode auf: ${enable ? 'Aktiviert' : 'Deaktiviert'}`);
+        
+        if (enable) {
+            html.classList.add('dark');
+            html.setAttribute('data-theme', 'dark');
+            html.style.colorScheme = 'dark';
+            
+            if (darkModeToggle) {
+                darkModeToggle.setAttribute('aria-pressed', 'true');
+                darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
+                // Premium Button-Icons aktualisieren
+                updateIcons(true);
+            }
+        } else {
+            html.classList.remove('dark');
+            html.setAttribute('data-theme', 'light');
+            html.style.colorScheme = 'light';
+            
+            if (darkModeToggle) {
+                darkModeToggle.setAttribute('aria-pressed', 'false');
+                darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
+                // Premium Button-Icons aktualisieren
+                updateIcons(false);
+            }
+        }
+        
+        // Einstellung im Local Storage speichern
+        localStorage.setItem(STORAGE_KEY, enable.toString());
+        
+        // ThemeColor Meta-Tag aktualisieren
+        const metaThemeColor = document.getElementById('metaThemeColor');
+        if (metaThemeColor) {
+            metaThemeColor.setAttribute('content', enable ? '#000000' : '#ffffff');
+        }
+        
+        // Event für andere Komponenten auslösen
+        window.dispatchEvent(new CustomEvent('darkModeChanged', { 
+            detail: { isDark: enable }
+        }));
+        
+        // Premium-Feedback
+        console.log(`${enable ? '🌙' : '☀️'} Premium Design umgeschaltet auf: ${enable ? 'Dark Mode' : 'Light Mode'}`);
+    }
+    
+    // Toggle Dark Mode Funktion
+    function toggleDarkMode() {
+        const currentMode = isDarkMode();
+        setDarkMode(!currentMode);
+        
+        // Premium-Animation beim Klick
+        if (darkModeToggle) {
+            const container = darkModeToggle.querySelector('div');
+            if (container) {
+                container.style.transform = 'scale(0.95)';
+                setTimeout(() => {
+                    container.style.transform = '';
+                }, 150);
+            }
+        }
+    }
+    
+    // Event Listener für Premium Toggle Button
+    if (darkModeToggle) {
+        console.log('🎨 Premium Dark Mode Toggle Button gefunden - initialisiere...');
+        
+        // Entferne vorherige Event-Listener, um Duplikate zu vermeiden
+        const newDarkModeToggle = darkModeToggle.cloneNode(true);
+        darkModeToggle.parentNode.replaceChild(newDarkModeToggle, darkModeToggle);
+        
+        // Neuen Event-Listener hinzufügen
+        newDarkModeToggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation(); // Verhindere Bubbling
+            toggleDarkMode();
+        });
+        
+        // Aktualisiere die Variable auf das neue Element
+        const updatedToggle = document.getElementById('darkModeToggle');
+        
+        // Initialen Status setzen
+        const isDark = isDarkMode();
+        setDarkMode(isDark);
+        
+        console.log('✨ Premium Dark Mode Toggle Button erfolgreich initialisiert');
+    } else {
+        console.error('❌ Premium Dark Mode Toggle Button konnte nicht gefunden werden!');
+    }
+    
+    // Tastaturkürzel: Strg+Shift+D für Dark Mode Toggle
+    document.addEventListener('keydown', function(e) {
+        if (e.ctrlKey && e.shiftKey && e.key === 'D') {
+            toggleDarkMode();
+            e.preventDefault();
+        }
+    });
+    
+    // Alternative Tastaturkürzel: Alt+T für Theme Toggle
+    document.addEventListener('keydown', function(e) {
+        if (e.altKey && e.key === 't') {
+            toggleDarkMode();
+            e.preventDefault();
+        }
+    });
+    
+    // Direkte Verfügbarkeit der Funktionen im globalen Bereich
+    window.toggleDarkMode = toggleDarkMode;
+    window.isDarkMode = isDarkMode;
+    window.setDarkMode = setDarkMode;
+    
+    // Premium Features
+    window.premiumDarkMode = {
+        toggle: toggleDarkMode,
+        isDark: isDarkMode,
+        setMode: setDarkMode,
+        version: '3.0.0-premium'
+    };
+    
+    console.log('🎨 Premium Dark Mode System geladen - Version 3.0.0');
+});