0

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>
2
  • Revisa esta respuesta, la diferencia es que funciona con checkbox en lugar de enlace, pero puedes adaptarlo fácilmente.
    – Triby
    Commented el 30 mar. 2021 a las 16:37
  • viendo tu código, supongo que el método darkModeOn(stateDarkMode) cambia el valor de stateDarkMode, si viene en false, y pasa por el primer if se vuelve true, dejando que entre al segundo if... Commented el 30 mar. 2021 a las 16:37

2 respuestas 2

0

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Change Dark Mode</title>
</head>
<body>
    <div id="bodyDM">
    </div>
    <li class="nav-item">
        <a onclick="switchDarkMode()" class="nav-link" href="#" role="button">
         <i id="iconDarkMode" class="fas fa-toggle-off"></i>
            Link
        </a>
      </li>
</body>
</html>

JS:

<script>
window.onload = function () {
    initDarkMode();
}


function initDarkMode() {
    if (getDarkMode() === null) {
        setDarkMode(false);
    }

    if (getDarkMode()) {
        changeCSSDarkMode();
    }
}

function getDarkMode() {
    return localStorage.getItem("dark_mode");
}

function setDarkMode(value) {
    localStorage.setItem("dark_mode", value);
    return true;
}

function trueOrFalseDarkMode() {
    if(getDarkMode() === "true") {
        return false;
    } else {
        return true;
    }
}

function switchDarkMode() {
    setDarkMode(trueOrFalseDarkMode());
    changeCSSDarkMode();
}

function changeCSSDarkMode() {
    if (getDarkMode() === "true") {
        document.getElementById("bodyDM").classList.add("dark-mode");
        document.getElementById("iconDarkMode").classList.remove("fa-toggle-off");
        document.getElementById("iconDarkMode").classList.add("fa-toggle-on");
    } else {
        document.getElementById("bodyDM").classList.remove("dark-mode");
        document.getElementById("iconDarkMode").classList.remove("fa-toggle-on");
        document.getElementById("iconDarkMode").classList.add("fa-toggle-off");
    }
}

</script>

Basicamente inicializas el modo oscuro leyendo la informacion que se encuentra en localStorage, puedes leer mas de localStorage aqui:

[localStorage Mozilla][1] [1]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Despues cada vez que el usuario presione el Link cambiara el modo oscuro de encendido a apagado.

Renombre algunas de tus funciones ya que pienso que el nuevo nombre es mas significativo.

1
  • Muchas gracias.
    – rulo900
    Commented el 30 mar. 2021 a las 18:16
0

Ya pude realizarlo, me comentaron que normalmente se hace con un input tipo checkbox yo lo hice con una etiqueta de link. Si a alguien mas le llegara a servir les adjunto como queda finalmente.

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>

/*Variable que juega como una bandera para identificar el estado en el que esta el 
botón de Modo Oscuro*/
stateDarkMode = false;

/*Sería la función matriz, es la que se activa cada vez que le damos click al botón y 
de aqui se activan las otras dos funciones que son darkModeOn() y darkModeOff()*/
function darkMode() {
  if (stateDarkMode == false) {
   darkModeOn();
 }else{
   darkModeOff();
 }
}

/*Esta función es la que activa el modo oscuro, lo que hace es agregar una clase a la 
etiqueta body html que tiene una ID llamada "bodyDM", tambien quita la clase del icono 
que hace que se vea desactivado y posteriormente agrega la clase para que se vea como 
activado.*/
function darkModeOn() {
 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;
}

/*Al igual que la otra función, pero contrario, quita y agrega clases.*/
function darkModeOff() {
 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;
}
</script>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.