0

Hola estoy creando un mi sitio web para mi canal de YouTube. Pero quiero ponerle el modo oscuro. pero al momento de activar el modo oscuro se pone pero al refrescar el sitio se desactiva el modo oscuro ¿Alguien me puede ayudar para que no suceda eso? Estoy trabajando con HTML, CSS, JS.

CODIGO CSS

.oscuro{
transition:.40s;
background-color: #1f1f1f; 
color: #f1eded; 
}

CODIGO JAVASCRIPT

 function cambiarModo() { 
   var cuerpoweb = document.body;
   cuerpoweb.classList.toggle("oscuro");
 }
2
  • 1
    Cuando activa el modo oscuro puedes almacenar ese dato en un cookie o localStorage y al cargar la pagina validar si existe ese dato para que automaticamente lo pongas cuando entra, en tu caso directamente le asignas la clase oscura, ya si trabajas con alguna base de datos y quieres guardar el tema de preferencia del usuario tienes que almacenar el dato en la base de datos.
    – Ange Reyna
    Commented el 7 ago. 2020 a las 1:11
  • 2
    @AngelReynaTorrejon... Eso suena más a una respuesta que a comentario. Añade un poco de javascript para guardar esa preferencia en cookie o local storage y se convierte en una respuesta completamente aceptable.
    – Arriel
    Commented el 7 ago. 2020 a las 2:42

2 respuestas 2

2

También puedes usar la propiedad @media (prefers-color-scheme: value) de CSS donde value indica si el usuario no tiene ninguna preferencia de colores o si es light o dark.

body {
  --color: salmon;
  --content: '🙅‍ no compatible';
  --colorFont: white;
  
  background-color: var(--color);
  color: var(--colorFont);
}

body::after {
  content: var(--content);
}

@media (prefers-color-scheme: light) {
  body {
    --color: white;
    --colorFont: black;
    --content: '🌞 light version';
  }
}

@media (prefers-color-scheme: dark) {
  body {
    --color: black;
    --colorFont: white;
    --content: '🌑 dark version';
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Media prefers color scheme</title>
</head>
<body>
  <h2>Hello world</h2>

</body>
</html>

Entonces con estas media queries podemos saber si el dispositivo donde se cargue el sitio web tiene activado el modo oscuro o no.

El soporte para navegadores no es del 100% pero si es soportado por los mas usados.

1

Basado en el comentario de @AngelReynaTorrejon, esto podría servir:

function cambiarModo() { 
  var cuerpoweb = document.body;
  var oscuro = cuerpoweb.classList.toggle("oscuro");
  localStorage.setItem("oscuro", oscuro);
}

document.addEventListener("DOMContentLoaded", function() {
  if (localStorage.getItem("oscuro")) {
    cambiarModo();
  }
});

El método toggle() que ya se está usando en cambiarModo() permite saber si la clase oscuro se añadió al elemento (retorno true) o si se eliminó del elemento (retorno false). Así que este valor de retorno se puede almacenar en el almacenamiento local a través de la propiedad localStorage. Esta propiedad permite acceder a un objeto que tiene, entre otros, dos métodos útiles en este caso: setItem() y getItem().

Al llamar localStorage.setItem("oscuro", oscuro) en cambiarModo() se está guardando un valor true o false en el ítem oscuro del almacenamiento local para saber si el modo es oscuro o no, respectivamente. Los valores almacenados en el almacenamiento local permanecen almacenados y se pueden consultar incluso si la página se refresca.

Para cambiar el modo cuando la página se carga, en caso de que sea necesario, se puede usar el evento DOMContentLoaded y registrar una función que sea llamada cuando este evento ocurra. En esta función se puede consultar el valor del ítem oscuro en el almacenamiento local a través de localStorage.getItem("oscuro"). Si el valor obtenido es true significa que se había cambiado a modo oscuro y para mantener esto se puede llamar nuevamente a cambiarModo().

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.