32 lines
1.2 KiB
JavaScript
Executable File
32 lines
1.2 KiB
JavaScript
Executable File
// assets/js/theme.js
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
|
|
const applyTheme = (theme) => {
|
|
if (theme === 'dark') {
|
|
document.documentElement.classList.add('dark-mode');
|
|
if(themeIcon) themeIcon.classList.replace('bi-sun-fill', 'bi-moon-fill');
|
|
} else {
|
|
document.documentElement.classList.remove('dark-mode');
|
|
if(themeIcon) themeIcon.classList.replace('bi-moon-fill', 'bi-sun-fill');
|
|
}
|
|
};
|
|
|
|
// Aplica el tema guardado al cargar la página.
|
|
// Esto se hace en el head para evitar FOUC, pero lo mantenemos aquí para el ícono.
|
|
const storedTheme = localStorage.getItem('theme') || 'light';
|
|
applyTheme(storedTheme);
|
|
|
|
|
|
if(themeToggle) {
|
|
themeToggle.addEventListener('click', () => {
|
|
const isDarkMode = document.documentElement.classList.contains('dark-mode');
|
|
const newTheme = isDarkMode ? 'light' : 'dark';
|
|
|
|
localStorage.setItem('theme', newTheme);
|
|
applyTheme(newTheme);
|
|
});
|
|
}
|
|
});
|