/** * BreakPilot Studio - Theme Module * * Dark/Light Mode Toggle-Funktionalität: * - Speichert Präferenz in localStorage * - Unterstützt data-theme Attribut auf * * Refactored: 2026-01-19 */ // Initialisiere Theme sofort beim Laden (IIFE) (function initializeTheme() { const savedTheme = localStorage.getItem('bp-theme') || 'dark'; document.documentElement.setAttribute('data-theme', savedTheme); console.log('Initial theme set to:', savedTheme); })(); /** * Holt das aktuelle Theme * @returns {string} - 'dark' oder 'light' */ export function getCurrentTheme() { return document.documentElement.getAttribute('data-theme') || 'dark'; } /** * Setzt das Theme * @param {string} theme - 'dark' oder 'light' */ export function setTheme(theme) { if (theme !== 'dark' && theme !== 'light') { console.warn(`Invalid theme: ${theme}. Use 'dark' or 'light'.`); return; } document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('bp-theme', theme); // Custom Event für andere Module window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme } })); } /** * Wechselt zwischen Dark und Light Mode * @returns {string} - Das neue Theme */ export function toggleTheme() { const current = getCurrentTheme(); const newTheme = current === 'dark' ? 'light' : 'dark'; setTheme(newTheme); return newTheme; } /** * Initialisiert den Theme-Toggle-Button * Sucht nach Elements mit IDs: theme-toggle, theme-icon, theme-label */ export function initThemeToggle() { const toggle = document.getElementById('theme-toggle'); const icon = document.getElementById('theme-icon'); const label = document.getElementById('theme-label'); if (!toggle || !icon || !label) { console.warn('Theme toggle elements not found (theme-toggle, theme-icon, theme-label)'); return; } function updateToggleUI(theme) { if (theme === 'light') { icon.textContent = '☀️'; label.textContent = 'Light'; } else { icon.textContent = '🌙'; label.textContent = 'Dark'; } } // Initialize UI based on current theme updateToggleUI(getCurrentTheme()); // Click-Handler toggle.addEventListener('click', function() { console.log('Theme toggle clicked'); const newTheme = toggleTheme(); console.log('Switched to:', newTheme); updateToggleUI(newTheme); }); } /** * Prüft ob Dark Mode aktiv ist * @returns {boolean} */ export function isDarkMode() { return getCurrentTheme() === 'dark'; } /** * Prüft ob Light Mode aktiv ist * @returns {boolean} */ export function isLightMode() { return getCurrentTheme() === 'light'; }