Projektarbeit-MYP/backend/app/static/js/dark-mode-fix.js

/**
 * Dark Mode Toggle Fix
 * Diese Datei stellt sicher, dass der Dark Mode Toggle Button korrekt funktioniert
 */

document.addEventListener('DOMContentLoaded', function() {
    // Dark Mode Toggle Button
    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 Toggle-Button aktualisieren
     */
    function updateIcons(isDark) {
        // Finde die Icons im Button - versuche sowohl direkte Kinder als auch verschachtelte
        let sunIcon = darkModeToggle.querySelector('.sun-icon');
        let moonIcon = darkModeToggle.querySelector('.moon-icon');
        
        // Wenn Icons nicht gefunden wurden, erstelle sie neu
        if (!sunIcon || !moonIcon) {
            console.warn('Icons nicht gefunden - erzeuge neue Icons');
            
            // Entferne vorhandene Inhalte im Button
            darkModeToggle.innerHTML = '';
            
            // Neue Icons erstellen
            sunIcon = document.createElement('svg');
            sunIcon.className = 'w-5 h-5 sm:w-5 sm:h-5 sun-icon';
            sunIcon.setAttribute('fill', 'none');
            sunIcon.setAttribute('stroke', 'currentColor');
            sunIcon.setAttribute('viewBox', '0 0 24 24');
            sunIcon.setAttribute('aria-hidden', 'true');
            sunIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />';
            
            moonIcon = document.createElement('svg');
            moonIcon.className = 'w-5 h-5 sm:w-5 sm:h-5 moon-icon hidden';
            moonIcon.setAttribute('fill', 'none');
            moonIcon.setAttribute('stroke', 'currentColor');
            moonIcon.setAttribute('viewBox', '0 0 24 24');
            moonIcon.setAttribute('aria-hidden', 'true');
            moonIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />';
            
            darkModeToggle.appendChild(sunIcon);
            darkModeToggle.appendChild(moonIcon);
        }
        
        // Icons entsprechend dem Dark Mode Status anzeigen/verbergen
        if (isDark) {
            sunIcon.classList.add('hidden');
            moonIcon.classList.remove('hidden');
        } else {
            sunIcon.classList.remove('hidden');
            moonIcon.classList.add('hidden');
        }
    }
    
    /**
     * Dark Mode aktivieren/deaktivieren
     */
    function setDarkMode(enable) {
        console.log(`Setze 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');
                // 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');
                // 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 }
        }));
    }
    
    // Toggle Dark Mode Funktion
    function toggleDarkMode() {
        const currentMode = isDarkMode();
        setDarkMode(!currentMode);
    }
    
    // Event Listener für Toggle Button
    if (darkModeToggle) {
        // Vorherige Event-Listener entfernen, 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
        darkModeToggle = newDarkModeToggle;
        
        // Initialen Status setzen
        const isDark = isDarkMode();
        setDarkMode(isDark);
        
        console.log('Dark Mode Toggle Button erfolgreich initialisiert');
    } else {
        console.error('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();
        }
    });
    
    // Direkte Verfügbarkeit der Funktionen im globalen Bereich
    window.toggleDarkMode = toggleDarkMode;
    window.isDarkMode = isDarkMode;
    window.setDarkMode = setDarkMode;
});