Estoy tratando de hacer el modo de luz oscura con javascript y almacenamiento local, pero algo no está bien. Aquí está el código para el icono de alternar
<i class="fa-regular fa-moon change-theme" title="Theme" id="theme-button"></i>
y aquí está el código js
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'fa-sun'
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'fa-moon' : 'fa-sun'
if (selectedTheme) {
document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
themeButton.classList[selectedIcon === 'fa-moon' ? 'add' : 'remove'](iconTheme)
}
themeButton.addEventListener('click', () => {
document.body.classList.toggle(darkTheme)
themeButton.classList.toggle(iconTheme)
localStorage.setItem('selected-theme', getCurrentTheme())
localStorage.setItem('selected-icon', getCurrentIcon())
})
Cuando hago clic en el icono, agrega fa-sun al atributo de clase y lo elimina cuando vuelvo a hacer clic, pero la clase fa-moon nunca se elimina del atributo de clase y el icono de sol no se muestra.
Así es como lo arreglé... primero cambié el ícono en el código html a este
<i class="fa-regular fa-sun change-theme" title="Theme" id="theme-button"></i>
y luego cambió js así
const themeButton = document.getElementById('theme-button');
const darkTheme = 'dark-theme';
const darkIcon = 'fa-sun';
const lightIcon = 'fa-moon';
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light';
const getCurrentIcon = () => themeButton.classList.contains(lightIcon) ? lightIcon : darkIcon;
document.body.classList.add(darkTheme);
themeButton.classList.add(selectedTheme === 'dark' ? lightIcon : darkIcon);
themeButton.addEventListener('click', () => {
document.body.classList.toggle(darkTheme);
themeButton.classList.toggle(darkIcon);
themeButton.classList.toggle(lightIcon);
localStorage.setItem('selected-theme', getCurrentTheme());
localStorage.setItem('selected-icon', getCurrentIcon());
});
y ahora funciona como yo quería: cuando el modo oscuro está activado, hay un ícono de sol y cuando se hace clic en el modo de luz solar está activado y se muestra el ícono de la luna.