FIN INIT

static/js/dark-mode-fix.js

@@ -0,0 +1,192 @@
+/**
+ * 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 darkModeToggles = document.querySelectorAll('.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) {
+        darkModeToggles.forEach(darkModeToggle => {
+            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';
+            
+            darkModeToggles.forEach(toggle => {
+                toggle.setAttribute('aria-pressed', 'true');
+                toggle.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';
+            
+            darkModeToggles.forEach(toggle => {
+                toggle.setAttribute('aria-pressed', 'false');
+                toggle.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(event) {
+        const currentMode = isDarkMode();
+        setDarkMode(!currentMode);
+        
+        // Premium-Animation beim Klick für den geklickten Button
+        if (event && event.currentTarget) {
+            const clickedToggle = event.currentTarget;
+            const slider = clickedToggle.querySelector('.dark-mode-toggle-slider');
+            if (slider) {
+                slider.style.transform = 'scale(0.95)';
+                setTimeout(() => {
+                    slider.style.transform = '';
+                }, 150);
+            }
+        }
+    }
+    
+    // Event Listener für Premium Toggle Buttons
+    if (darkModeToggles.length > 0) {
+        console.log(`🎨 ${darkModeToggles.length} Premium Dark Mode Toggle Button(s) gefunden - initialisiere...`);
+        
+        darkModeToggles.forEach((toggle, index) => {
+            // Event-Listener hinzufügen
+            toggle.addEventListener('click', function(e) {
+                e.preventDefault();
+                e.stopPropagation(); // Verhindere Bubbling
+                toggleDarkMode(e);
+            });
+        });
+        
+        // Initialen Status setzen
+        const isDark = isDarkMode();
+        setDarkMode(isDark);
+        
+        console.log('✨ Premium Dark Mode Toggle Buttons erfolgreich initialisiert');
+    } else {
+        console.error('❌ Keine Premium Dark Mode Toggle Buttons gefunden!');
+    }
+    
+    // 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');
+});