dark-mode.js (1569B)
1 /** 2 * Dark Mode Toggle 3 * Respeita a preferência do sistema e permite alternar manualmente 4 * Salva a preferência no localStorage 5 */ 6 7 const DARK_MODE_KEY = 'caderno_dark_mode'; 8 9 function initDarkMode() { 10 // Verificar preferência salva 11 const saved = localStorage.getItem(DARK_MODE_KEY); 12 let isDark; 13 14 if (saved !== null) { 15 isDark = saved === 'true'; 16 } else { 17 // Respeitar preferência do sistema 18 isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; 19 } 20 21 applyDarkMode(isDark); 22 } 23 24 function applyDarkMode(isDark) { 25 const html = document.documentElement; 26 const toggle = document.getElementById('dark-mode-toggle'); 27 28 if (isDark) { 29 html.setAttribute('data-theme', 'dark'); 30 if (toggle) toggle.textContent = '☀️'; 31 } else { 32 html.removeAttribute('data-theme'); 33 if (toggle) toggle.textContent = '🌙'; 34 } 35 36 localStorage.setItem(DARK_MODE_KEY, isDark); 37 } 38 39 function toggleDarkMode() { 40 const html = document.documentElement; 41 const isDark = html.getAttribute('data-theme') === 'dark'; 42 applyDarkMode(!isDark); 43 } 44 45 // Inicializar quando o DOM estiver pronto 46 if (document.readyState === 'loading') { 47 document.addEventListener('DOMContentLoaded', initDarkMode); 48 } else { 49 initDarkMode(); 50 } 51 52 // Detectar mudanças na preferência do sistema 53 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { 54 const saved = localStorage.getItem(DARK_MODE_KEY); 55 if (saved === null) { 56 // Se o usuário não escolheu manualmente, seguir o sistema 57 applyDarkMode(e.matches); 58 } 59 });