Aquí les traigo un código sencillo de modo nocturno para tu sitio web, elaborado con Vanilla javascript, libre de JQuery.
Contenidos
Código para el modo nocturno
Crearemos cuatro archivos separados: demo.css, modonocturno.html, night-mode.css y night-mode.js.
Primero, nos vamos al archivo «modonocturno.html» colocaremos los siguientes códigos HTML:
<!doctype html>
<html>
<head>
<title>El título que gustes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
</body>
</html>Segundo, en la cabecera de la página dentro de las etiquetas «<head></head>»:
<link rel="stylesheet" type="text/css" href="night-mode.css">
<!-- Assets & Estilos del Demo -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="demo.css">
<!-- Fin -->Tercero, en cuerpo de la página dentro de las etiquetas «<body></body>»:
<h1>Prueba de Modo Nocturno con Vanilla JS</h1>
<h2>Se añade una clase la etiqueta "<body>"</h2>
<p>Se añadirá la clase "<u>.apagado</u>" al body. Utilizala como padre para modificar todo tu CSS. al momento en que se pulse el botón del modo nocturno (NM).</p>
<figure><img src="https://picsum.photos/320/240" alt="Imagen de prueba"></figure>
<!-- Botón Modo Nocturno -->
<button id="boton-nocturno">NM</button>
<!-- Botón Modo Nortuno / Fin -->Luego en el pie de página después de la etiqueta «</body>»:
<script src="night-mode.js"></script>Después en el archivo «night-mode.css» colocaremos el siguiente código:
/* Estilos del Body en Modo Nocturno */
#boton-nocturno {
position: fixed;
left: 2vh;
bottom: 2vh;
border-radius: 50%;
height: 50px;
width: 50px;
text-align: center;
border: 0px none;
cursor: pointer;
background: #334455;
color: white;
font-weight: 700;
box-shadow: 3px 3px 5px #ccc;
}
#boton-nocturno:hover{
background: #00a2cb;
color: white;
}Y en el siguiente archivo «demo.css» colocaremos el siguiente código:
/* CSS Demo */
body {
font-family: 'Poppins', sans-serif;
color: #334455;
}
a {
color: #00bad1;
}
a:hover {
color: #0083a9;
}
/* CSS Demo con Modo Nocturno */
body.apagado{
background: black;
color: #ccbbaa;
}
.apagado #boton-nocturno{
background: white;
color: #345;
box-shadow: 3px 3px 5px #eee;
}
.apagado a{
color: #ff452e;
}
.apagado a:hover{
color: #ff7c56;
}Ahora agregamos al archivo «night-mode.js» el JavaScript (JS) que hará funcionar nuestro código:
// Sencillo Modo Nocturno
let btnNocturno = document.getElementById("boton-nocturno");
btnNocturno.onclick = function() {
document.querySelector("body").classList.toggle("apagado");
}Y cuando abramos el archivo «nightmode.html» ya tendremos nuestro código funcionando:
Notas:
Códigos en color rojo: Son importantes para la ejecución del código, puedes modificarlos vía CSS.
Códigos en color verde: Puedes cambiar las direcciones de los archivos si van a estar en carpetas diferentes.
Explicación del código
Se añade una clase a la etiqueta «<body>» al momento de hacer clic en el botón del modo nocturno, utilizando «querySelector» y «classList.toggle»; esta clase conecta con los estilos necesarios para hacer que la página entera cambie de color:
btnNocturno.onclick = function() {
document.querySelector("body").classList.toggle("apagado");
}Para que la función identifique el botón del modo nocturno seleccionamos su id («boton-nocturno») con «getElementById» y lo ponemos en una variable:
let btnNocturno = document.getElementById("boton-nocturno");Descargar ejemplo
Puede descargar el ejemplo del código desde mi repositorio en mi GitHub donde encontrará la versión más actualizada:
Puede leer otras entradas en mi blog o seguirme en mis redes sociales para mantenerse actualizado:
Facebook Linked InEspero tengan un buen día :D.