Boton Modo Oscuro en tu página web CSS y JS

El modo oscuro lleva ya un tiempo con nosotros. Desde aplicaciones hasta páginas web, su influencia en la gente ha sido muy grande. No es de extrañar que a todo el mundo le guste tener la opción de cambiar al modo oscuro en sus sitios web.

Ahora, puede que hayas visto múltiples formas de conseguir el modo oscuro para tu sitio web. Ya sea cambiando una simple clase para oscurecer el fondo o usando la combinación de colores de Preferencias para cambiar dependiendo del tema del sistema del usuario. Bueno, eso es genial. Pero la gente no siempre tiene dispositivos con soporte para modo oscuro de todo el sistema. Y también, cambiar de clase puede no ayudar a un sitio web con múltiples colores. Entonces, ¿cuál es la solución?

Cómo crear el efecto modo oscuro y claro en una página web

En realidad es bastante simple. La mejor manera de conseguir el modo oscuro es cambiando toda la hoja de estilo cuando el usuario hace clic en el botón para el modo oscuro o cambia un interruptor.

Este método no sólo te da la libertad de estilizar una versión oscura completa de tu sitio web, sino que también ayuda si hay múltiples elementos que quieres colorear en consecuencia, lo que de otra manera sería difícil de lograr con sólo cambiar de clase. También puedes tener muchos otros temas de color para tu sitio web. Entonces, ¿cómo lo hacemos? Basta de leer! Entremos en el código ahora.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=10" />
    <title>Modo Oscuro</title>
    <link rel="stylesheet" href="modo-dia.css" id="theme" />
  </head>
  <body>
    <h1>DEMOSTRACIÓN DE MODO OSCURO CAMBIANDO LA HOJA DE ESTILOS.</h1>
<div>
  <button onclick="switchSheet()">Switch</button>
</div>
    <script src="script.js"></script>
  </body>
</html>

El modo día

* {
  font-family: "Segoe UI";
  font-weight: 200;
}
h1 {
  text-align: center;
  margin-top: 40vh;
}
div {
  display: flex;
  justify-content: center;
}
button {
  padding: 10px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  font-size: 1em;
}
button:hover {
  background: rgb(45, 50, 102);
  color: rgb(255, 255, 255);
}

El modo noche

* {
  font-family: "Segoe UI";
  font-weight: 200;
}
body {
  background: rgb(19, 18, 18);
}
h1 {
  text-align: center;
  margin-top: 40vh;
  color: #fff;
}
div {
  display: flex;
  justify-content: center;
}
button {
  padding: 10px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  font-size: 1em;
}
button:hover {
  background: rgb(45, 50, 102);
  color: rgb(255, 255, 255);
}

El javascript:

function switchSheet() {
  let theme = document.getElementById("theme");

  if (theme.getAttribute("href") == "modo-dia.css") {
    theme.href = "modo-noche.css";
  } else {
    theme.href = "modo-dia.css";
  }
}

En el ejemplo anterior, cuando se hace clic en el botón, la función switchSheet() comprueba el archivo CSS utilizando el atributo href por el id que le dimos a la etiqueta de enlace.

Si existe el archivo modo-dia.css, lo reemplaza por el archivo modo-noche.css. Si no, lo cambia de nuevo al archivo modo-dia.css. ¡Eso es! Ahora tienes el Modo Oscuro para tu página web sin tener que recargar la página en absoluto.