Here I bring you a simple night mode code for your website, made with Vanilla javascript, free of JQuery library.
Contenidos
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 "<body>"</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 InI hope you have a good day 😀 .