manage-your-printer/static/js/dark-mode-fix.js

/**
 * 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');
});