Simple night mode for your website

Here I bring you a simple night mode code for your website, made with Vanilla javascript, free of JQuery library.

Code for night mode

We will create four separate files: demo.css, modonocturno.html, night-mode.css and night-mode.js.

First, we go to the file “modonocturno.html“, we will place the following HTML codes:

<!doctype html>
<html>
<head>
	<title>Night Mode with Vanilla JS</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>

Second, in the page header inside the “<head></head>” tags:

<link rel="stylesheet" type="text/css" href="night-mode.css">
<!-- Demo Assets & Style -->
<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">
<!-- End -->

Third, in the body of the page within the “<body></body>” tags:

<h1>Night Mode Test with Vanilla JS</h1>
<h2>A class is added to the label "&lt;body&gt;"</h2>
<p>The class "apagado" will be added to the body. Use it as a parent to modify all your CSS. the moment the night mode button is pressed.</p>
<figure><img src="https://picsum.photos/320/240" alt="Test Image"></figure>
<!-- Buttom Night Mode -->
<button id="boton-nocturno">NM</button>
<!-- Buttom Night Mode / End -->

Then in the footer after the “</body>” tag:

<script src="night-mode.js"></script>

In the “night-mode.css” file we will place the following code:

/* Body Styles in Night Mode */
#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;
}

And in the “demo.css” file we will place the following code:

/* CSS Demo */
body {
	font-family: 'Poppins', sans-serif;
	color: #334455;
}
a {
	color: #00bad1;
}
a:hover {
	color: #0083a9;
}

/* CSS Demo with Night Mode */

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;
}

Now we add to the “night-mode.js” file the JavaScript (JS) that will make our code work:

// Simple Night Mode
let btnNocturno = document.getElementById("boton-nocturno");

btnNocturno.onclick = function() {
	document.querySelector("body").classList.toggle("apagado");
}

And when we open the “nightmode.html” file we’ll already have our code working:

Notes:

Codes in red color: They are important for the code execution, you can modify them via CSS.

Green color codes: You can change the file addresses if they are going to be in different folders.

Code explanation

A class is added to the “<body>” tag when the night mode button is clicked, using “querySelector” and “classList.toggle”; this class connects to the styles needed to make the entire page change color:

btnNocturno.onclick = function() {
	document.querySelector("body").classList.toggle("apagado");
}

For the function to identify the night mode button, we select its id (“night-button”) with “getElementById” and put it in a variable:

let btnNocturno = document.getElementById("boton-nocturno");

Download example

You can download the code example from my repository on Github where you will find the most up-to-date version:

You can read other posts on my blog or follow me on my social networks to stay updated:

Facebook Linked In
× Modal de Imagen

I hope you have a good day 😀 .

Leave a comment

Your email address will not be published. Required fields are marked *