4

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>

1 respuesta 1

1

Lo único que tienes que hacer es cambiar el contenido del "botón" de acuerdo al modo seleccionado, si es normal asignas 'Sun' a .innerText, si es nocturno, asignas 'Moon', o viceversa, como prefieras.

const btnSwitch = document.querySelector('#nightmode');

btnSwitch.addEventListener('click', () => {
    document.body.classList.toggle('nigth');
    btnSwitch.classList.toggle('active');

    if(document.body.classList.contains('nigth')){
        // Asignar contenido cuando estás en modo nocturno
        btnSwitch.innerText = 'Moon';
        localStorage.setItem('nigth-mode', 'true');
    } else {
        // Asignar contenido cuando estás en modo normal
        btnSwitch.innerText = 'Sun';
        localStorage.setItem('nigth-mode', 'false');
	  }
});

// Ejecutar hasta que se cargue todo el contenido de la página
window.onload = function() {
    if(localStorage.getItem('nigth-mode') === 'true'){
        btnSwitch.innerText = 'Moon';
        document.body.classList.add('nigth');
    } else {
        btnSwitch.innerText = 'Sun';
        document.body.classList.remove('nigth');
    }
}
body {
    transition: .3s ease all;
}

body.nigth {
    background-color: rgb(21, 32, 43);
    color: #fff;
}

.btn-span {cursor: pointer;}
<span class="btn-span badge badge-primary" id="nightmode">Sun</span>

3
  • Gracias Triby, en texto si funciona, lo que no logro hacerlo es con los iconos
    – user101604
    Commented el 14 abr. 2020 a las 0:47
  • Pero bueno, es lo menos los iconos, muchas gracias por tu ayuda!
    – user101604
    Commented el 14 abr. 2020 a las 1:00
  • Podrías poner los íconos con <img> y cambiar el atributo display, dependiendo del tema seleccionado.
    – Triby
    Commented el 14 abr. 2020 a las 3:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.