Estoy trabajando sobre un efecto que es el modo nocturno pero mi problema es que sigue saliendo la palabra sun
y moon
cuando el efecto esta activo (en su lugar van dos iconos).
Funciona bien, pero deja la palabra sun cuando el modo oscuro esta activo y no puedo solucionarlo.
Agradezco de antemano!
const btnSwitch = document.querySelector('#nightmode');
btnSwitch.addEventListener('click', () => {
document.body.classList.toggle('nigth');
btnSwitch.classList.toggle('active');
if(document.body.classList.contains('nigth')){
localStorage.setItem('nigth-mode', 'true');
} else {
localStorage.setItem('nigth-mode', 'false');
}
});
if(localStorage.getItem('nigth-mode') === 'true'){
document.body.classList.add('nigth');
} else {
document.body.classList.remove('nigth');
}
body {
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
body.nigth {
background-color: rgb(21, 32, 43);
color: #fff;
}
.btn-span {cursor: pointer;}
<script src="https://kit.fontawesome.com/06494d4185.js"></script>
<span class="btn-span badge badge-primary" id="nightmode">
<i class="far fa-sun"></i>
<i class="fas fa-moon"></i>
</span>