Adding night mode to our website

Cheers ..! night mode forced me to write this post .Night mode must be appreciated because some users really care of night mode in our website during night (of course weird people like me, do like dark mode in day use). It is really important to have when we have a website that really maintains long reading content.

Lets dive into code. I'm starting with a headache , that's javascript.

function toggleDarkLight() {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

The css part.

$light-color: #eee;
body.dark-mode {
background-color: #485461;
background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
color: $light-color;
a {
color: #00000;
}

}
body.light-mode {
background-color: $light-color;
color: #000000;
a {
color: #000000;
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/*thanks w3schools*/
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

And the skeleton part.

<body id="body" class="dark-mode">
<h1>Mode switcher</h1>

<label class="switch">
<input type="checkbox" name="dark_light" onclick="toggleDarkLight()" checked>
<span class="slider round"></span>
</label>

Run This on codepen:

See the Pen
Adding night mode to our website by Adarshreddy adelli (@adarshreddyadelli)
on CodePen.

that's it ...!

Adarshreddy Adelli

As an Engineering Lead with deep expertise in Artificial Intelligence, Cybersecurity, and Systems Architecture, I guide teams in building innovative, secure, and scalable solutions.I am passionate about tackling challenging technical problems, fostering engineering excellence, and delivering solutions that balance innovation, security, and performance. I actively share knowledge through blogging and community engagement, contributing to the advancement of AI and cybersecurity practices.