96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
console.log('🎯 Theme toggle script iniciando...');
|
|
|
|
// Aguardar DOM estar pronto
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('🎯 DOM carregado, procurando elementos...');
|
|
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
const themeText = document.getElementById('theme-text');
|
|
|
|
console.log('🎯 Elementos encontrados:', {
|
|
toggle: !!themeToggle,
|
|
icon: !!themeIcon,
|
|
text: !!themeText
|
|
});
|
|
|
|
if (!themeToggle) {
|
|
console.error('❌ Botão theme-toggle não encontrado!');
|
|
return;
|
|
}
|
|
|
|
// Estado inicial - sempre começar claro
|
|
let currentTheme = 'light';
|
|
|
|
function applyTheme(theme) {
|
|
console.log('🎯 Aplicando tema:', theme);
|
|
|
|
const html = document.documentElement;
|
|
const body = document.body;
|
|
|
|
if (theme === 'dark') {
|
|
// Modo escuro
|
|
html.setAttribute('data-theme', 'dark');
|
|
body.classList.add('dark-theme');
|
|
|
|
if (themeIcon) {
|
|
themeIcon.className = 'fas fa-moon';
|
|
}
|
|
if (themeText) {
|
|
themeText.textContent = 'Escuro';
|
|
}
|
|
|
|
console.log('🌙 Tema escuro aplicado');
|
|
} else {
|
|
// Modo claro
|
|
html.setAttribute('data-theme', 'light');
|
|
body.classList.remove('dark-theme');
|
|
|
|
if (themeIcon) {
|
|
themeIcon.className = 'fas fa-sun';
|
|
}
|
|
if (themeText) {
|
|
themeText.textContent = 'Claro';
|
|
}
|
|
|
|
console.log('☀️ Tema claro aplicado');
|
|
}
|
|
|
|
// Salvar no localStorage
|
|
try {
|
|
localStorage.setItem('qr-rapido-theme', theme);
|
|
console.log('💾 Tema salvo no localStorage:', theme);
|
|
} catch (e) {
|
|
console.warn('⚠️ Não foi possível salvar no localStorage:', e);
|
|
}
|
|
|
|
currentTheme = theme;
|
|
}
|
|
|
|
// Função de toggle
|
|
function toggleTheme() {
|
|
console.log('🔄 Toggle theme clicado. Tema atual:', currentTheme);
|
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
applyTheme(newTheme);
|
|
}
|
|
|
|
// Event listener
|
|
themeToggle.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
console.log('🖱️ Clique detectado no theme toggle');
|
|
toggleTheme();
|
|
});
|
|
|
|
// Aplicar tema inicial (sempre claro por enquanto)
|
|
applyTheme('light');
|
|
|
|
console.log('✅ Theme toggle configurado com sucesso!');
|
|
});
|
|
|
|
// Função global para debug
|
|
window.debugTheme = function() {
|
|
console.log('🔍 Debug do tema:');
|
|
console.log('- currentTheme:', document.documentElement.getAttribute('data-theme'));
|
|
console.log('- localStorage:', localStorage.getItem('qr-rapido-theme'));
|
|
console.log('- body classes:', document.body.className);
|
|
}; |