39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
function applyTheme(t) {
|
|
document.documentElement.setAttribute('data-theme', t);
|
|
localStorage.setItem('theme', t);
|
|
|
|
const isDark = (t === 'dark');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
const themeLabel = document.getElementById('theme-label');
|
|
|
|
if (themeIcon) {
|
|
themeIcon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
|
|
}
|
|
if (themeLabel) {
|
|
themeLabel.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
|
|
}
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const current = document.documentElement.getAttribute('data-theme');
|
|
applyTheme(current === 'dark' ? 'light' : 'dark');
|
|
}
|
|
|
|
function initTheme() {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
applyTheme(savedTheme);
|
|
} else {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
applyTheme(prefersDark ? 'dark' : 'light');
|
|
}
|
|
}
|
|
|
|
// Listen for system theme changes only if the user hasn't set a manual override
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
|
if (!localStorage.getItem('theme')) {
|
|
applyTheme(e.matches ? 'dark' : 'light');
|
|
}
|
|
});
|
|
|
|
initTheme(); |