I am working on an effect that is the night mode but my problem is that the word keeps coming out sun
and moon
when the effect is active (in its place there are two icons).
It works fine, but it leaves the word sun when dark mode is on and I can't fix it.
Thank you in advance!
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>
The only thing you have to do is change the content of the "button" according to the selected mode, if it is normal you assign 'Sun' to
.innerText
, if it is night, assign 'Moon', or vice versa, as you prefer.