Dark theme is one of the most important aspects of website design. It has been a trending feature for the past few years. One of the major reasons for this is to avoid strain on the eyes due to high brightness and provide them safety, especially in not so illuminated spaces.
In today’s tutorial, we will learn how to create a dark mode switch. When the user clicks on this switch, the theme of the webpage/website toggles between dark and light mode. With this tutorial, you will get a basic idea of how you can add a dark theme option to your website without changing much code or without adding excessive CSS.
There are some do’s and don’ts when it comes to the dark theme in UI design. We will cover them shortly in this tutorial. For this tutorial, we need HTML, CSS & Vanilla Javascript. The javascript code we use is not too complicated so, you don’t have to worry about it. So let us get started with the tutorial.
Video Tutorial:
I have a video tutorial on this topic on my youtube channel. You can check out that video here below.
HTML:
Create an HTML file and save it by the name – “index.html”. Do copy the code I have provided below and paste it into your HTML file.
The HTML doesn’t contain many elements. Let us create a ‘div’ element with the class name ‘container’. The container wraps up a checkbox. We assign an id with the name ‘toggle’ to this checkbox. The reason for using the checkbox here is to style it and use it as the toggle switch.
Next, we need to add some demo text to the HTML. I am adding some ‘lorem ipsum’ text for this purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dark Mode Toggle</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="checkbox" id="toggle">
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, ab sequi! Ipsum, reprehenderit! Dolor vero sunt corporis ea natus, nulla cum assumenda. Nostrum corporis molestiae corrupti magni. Corporis ducimus ipsam, qui et eveniet nisi excepturi sint dolore, labore velit repellat quia quasi! Repellendus quo magni voluptatem aut odit, totam sequi autem, doloremque minima tenetur placeat debitis reiciendis repudiandae dolore tempore adipisci blanditiis reprehenderit doloribus recusandae esse commodi harum ratione quisquam?
</p>
<script src="script.js"></script>
</body>
</html>
CSS:
Create a stylesheet and name it – ‘style.css’. Now, copy the code below and paste it into your stylesheet.
We start by adding some padding to the body. Next, add width and centre the container.To style the checkbox to look like a toggle switch, ‘after’ pseudo-element. The ‘after’ pseudo-element is made to look like a circle to represent the sun.
We need to add style for a ‘dark-themed class. This class will be applied to the body when the user clicks on the toggle.
In the dark theme, the background colour is set to ‘#15181f’. Use grey or darker shades of grey. Avoid using black. As total black colour maybe results in eye strain. Darker shades of grey are more suited.For font colour, we choose a less saturated version of white.
In dark, theme the background colour of the switch changes to white(or you can use the less saturated version of white). The ‘after’ pseudo-element is made to look like a moon using the box-shadow property.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
padding: 30px;
}
.container{
width: 100%;
height: 40px;
position: relative;
margin-bottom: 30px;
}
#toggle{
-webkit-appearance: none;
appearance: none;
height: 40px;
width: 75px;
background-color: #15181f;
position: absolute;
right: 0;
border-radius: 20px;
outline: none;
cursor: pointer;
}
#toggle:after{
content: "";
position: absolute;
height: 30px;
width: 30px;
background-color: #ffffff;
top: 5px;
left: 7px;
border-radius: 50%;
}
p{
font-family: "Open Sans",sans-serif;
line-height: 35px;
text-align: justify;
}
.dark-theme{
background-color: #15181f;
color: #e5e5e5;
}
.dark-theme #toggle{
background-color: #ffffff;
}
.dark-theme #toggle:after{
background-color: transparent;
box-shadow: 10px 10px #15181f;
top: -4px;
left: 30px;
}
Javascript:
Now for the last step, we need to add functionality to get this toggle working. Create a javascript file called ‘script.js’. Copy the code provided here and paste it into your script file.
The only thing we do in javascript is to add a ‘click’ event listener to the toggle. On click event, the ‘dark-theme’ class is toggled on the document body. In this way, the dark mode is added and removed when the user clicks on the switch.
document.getElementById("toggle").addEventListener("click", function(){
document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});
Your dark mode switch is now ready. Though this was a small example to introduce you to one of the methods on how you could add dark mode to a webpage; You can go ahead and expand this to add dark mode to your whole website. If you liked this tutorial, be sure to check out my youtube channel. See you in the next tutorial.
