75 lines
2.3 KiB
JavaScript
75 lines
2.3 KiB
JavaScript
// Theme toggle functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
const themeText = document.getElementById('theme-text');
|
|
|
|
if (!themeToggle) {
|
|
console.error('❌ Botão theme-toggle não encontrado!');
|
|
return;
|
|
}
|
|
|
|
// Estado inicial - sempre começar claro
|
|
let currentTheme = 'light';
|
|
|
|
function applyTheme(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';
|
|
}
|
|
} 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';
|
|
}
|
|
}
|
|
|
|
// Salvar no localStorage
|
|
try {
|
|
localStorage.setItem('qr-rapido-theme', theme);
|
|
} catch (e) {
|
|
console.warn('⚠️ Não foi possível salvar no localStorage:', e);
|
|
}
|
|
|
|
currentTheme = theme;
|
|
}
|
|
|
|
// Função de toggle
|
|
function toggleTheme() {
|
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
applyTheme(newTheme);
|
|
}
|
|
|
|
// Event listener
|
|
themeToggle.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
toggleTheme();
|
|
});
|
|
|
|
// Aplicar tema inicial (sempre claro por enquanto)
|
|
applyTheme('light');
|
|
});
|
|
|
|
// 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);
|
|
}; |