Quiero hacer una función en mi página web donde se active y desactive el modo oscuro, primero que nada cuando le doy click al botón en cuestión si se cambia a modo oscuro pero después que quiero quitarlo no puedo. Así mismo, una vez logrando que funcione esto me gustaría saber como hacer para que después de que el usuario active el modo oscuro al cambiar de pestaña se le quede guardada esta configuración y no tenga que hacerlo cada vez que entre a una nueva vista.
HTML
<li class="nav-item">
<a onclick="darkMode()" class="nav-link" href="#" role="button">
<i id="iconDarkMode" class="fas fa-toggle-off"></i>
</a>
</li>
Javascript
<script>
stateDarkMode = false;
function darkMode() {
if (stateDarkMode == false) {
darkModeOn(stateDarkMode);
}
if (stateDarkMode == true) {
darkModeOff(stateDarkMode);
}
}
function darkModeOn(stateDarkMode) {
document.getElementById("bodyDM").classList.add ("dark-mode");
document.getElementById("iconDarkMode").classList.remove ("fa-toggle-off");
document.getElementById("iconDarkMode").classList.add ("fa-toggle-on");
stateDarkMode = true;
return stateDarkMode;
}
function darkModeOff(stateDarkMode) {
document.getElementById("bodyDM").classList.remove ("dark-mode");
document.getElementById("iconDarkMode").classList.remove ("fa-toggle-on");
document.getElementById("iconDarkMode").classList.add ("fa-toggle-off");
stateDarkMode = false;
return stateDarkMode;
}
</script>
darkModeOn(stateDarkMode)
cambia el valor destateDarkMode
, si viene en false, y pasa por el primer if se vuelve true, dejando que entre al segundo if...