Sencillo modo nocturno para tu sitio web

Aquí les traigo un código sencillo de modo nocturno para tu sitio web, elaborado con Vanilla javascript, libre de JQuery.

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&ntilde;ade una clase la etiqueta "&lt;body&gt;"</h2>
<p>Se a&ntilde;adir&aacute; la clase "<u>.apagado</u>" al body. Utilizala como padre para modificar todo tu CSS. al momento en que se pulse el bot&oacute;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 In
× Modal de Imagen

Espero tengan un buen día :D.

Deje un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *