Hello Coders, In this article we are going to learn how to create a Dark Mode theme and Light Mode theme toggle switch using HTML CSS and JavaScript.
Why Dark Mode?
Many users today love the websites which supports dark mode. Even the android recently introduced dark mode. Light Mode actually was painful for eyes, Turning everything to dark mode allows users to read or interact with our websites or applications more easier.
Dark mode is now the most important feature that every website should have to provide best user experience. So in this tutorial we are going to learn how to create a switch which toggles between light mode to dark mode. Users can either choose the website’s light mode or dark mode based on their requirements.
What are CSS Variables ?
In this project we will be using CSS variables. CSS variables can be used to hold a value if it is being used in the website more repeatedly. For example, if we are using a hex value of a color and it is being used 100 times in our website. Remembering and typing the hex code 100 times will be every tedious and difficult. So, we will create css variable which holds the hex code of that color, and we can use that variable wherever we want without having to remember the hex color code.
One more use case of css variables is, For example consider twitter, What if twitter one day decides that they need to change their main colors to all red. They need to change all the colors right by searching and finding them. Instead if we create variables and use them throughout the website. If there is a need of changing colors all we have to do is change the value of the variable. That’s it.
I have provided a step by step video tutorial as well as all the source code of this project which you can download by clicking on the download button at the bottom of this article.
Light Mode to Dark Mode Toggle Switch using CSS and JavaScript | Video Tutorial
In the video tutorial, I have shown how to build Light to Dark Mode switch toggle step by step. If you are complete beginner, Watch the video above to build this JavaScript project.
Light Mode to Dark Mode Toggle Switch using CSS and JavaScript | Source Code
Here are the HTML CSS and JavaScript Source Code of this project. Start with html and then design the project with css and make it working with JavaScript.
How do I create Dark Mode Theme in HTML? Free HTML Source Code
Create an index.html file. Add the basic structure of html by adding html, head, title, body tags. We will be using two icons i.e Sun Icon and moon icon from the font awesome. I have provided the import code of font awesome cdn below between head tag. Copy the below HTML codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Light to Dark Mode</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="theme-toggler" class="fas fa-moon"></div>
<div class="container">
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum quo quaerat nobis
incidunt vel molestiae odio velit autem. Impedit, consequuntur!
</p>
</div>
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum quo quaerat nobis
incidunt vel molestiae odio velit autem. Impedit, consequuntur!
</p>
</div>
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum quo quaerat nobis
incidunt vel molestiae odio velit autem. Impedit, consequuntur!
</p>
</div>
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum quo quaerat nobis
incidunt vel molestiae odio velit autem. Impedit, consequuntur!
</p>
</div>
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum quo quaerat nobis
incidunt vel molestiae odio velit autem. Impedit, consequuntur!
</p>
</div>
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum quo quaerat nobis
incidunt vel molestiae odio velit autem. Impedit, consequuntur!
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
How do I design Dark Mode theme in CSS? Free CSS Source Code
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
:root {
--primary-bg-color: #eee;
--secondary-bg-color: #fff;
--primary-text-color: #666;
--secondary-text-color: #999;
}
body.active {
--primary-bg-color: #222;
--secondary-bg-color: #333;
--primary-text-color: #fff;
--secondary-text-color: #eee;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
transition: all 0.2s linear;
}
body {
background: var(--primary-bg-color);
}
.container {
padding: 80px 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.container .content {
width: 400px;
background: var(--secondary-bg-color);
padding: 20px;
margin: 20px;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.container .content p {
line-height: 2;
color: var(--primary-text-color);
}
#theme-toggler {
position: fixed;
top: 15px;
right: 25px;
padding: 15px 20px;
font-size: 30px;
background: var(--secondary-bg-color);
color: var(--primary-text-color);
cursor: pointer;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
How do I create Light Mode to Dark Mode theme toggle switch in JavaScript? Free JavaScript Source Code
Create and script.js file and also link this javascript file to our html document. Below is the JavaScript Code for this project.
let themeToggler = document.getElementById('theme-toggler');
themeToggler.onclick = () => {
themeToggler.classList.toggle('fa-sun');
if (themeToggler.classList.contains('fa-sun')) {
document.body.classList.add('active');
} else {
document.body.classList.remove('active');
}
};
This is what it should look after completing building this project.
Download Source code of Light Mode to Dark Mode toggle switch using html css and JavaScript.
