Have you ever toggled between dark and light themes on a website and thought, "I wish my site could do that"? Well, now it can. In this article, I'll show you how to implement dark and light modes in your web projects using HTML, CSS, and JavaScript, giving your users the best visual experience.
Prerequisite: A basic understanding of HTML and CSS is required to comprehend this tutorial.
Dark/light theme Implementation
The key components of setting up a dark mode/light mode on websites are:
A webpage
A button for switching between the themes
The theme or color to be switched
The logic behind switching the theme and button text.
A Webpage
Set up your project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Tour App</title>
</head>
<body>
<div class="hero-sec">
<div class="col1">
<h1>Everyday Is a Journey</h1>
<p>Visit any Location Virtually, Anytime, Anywhere</p>
<button>Tour</button>
</div>
<div class="col2">
<img src="img.jpg" alt="landscape" width="560px">
</div>
</div>
</body>
</html>
Output of plain web page
A Toggle Button
It is important to add the theme toggle button. This is the button that triggers the change of color from light mode to dark mode and vice versa.
<button id="toggle-button">Dark mode</button>
Light/dark mode theme
This is a crucial step because two themes or colors are involved here. We need a way to attach different styles to the web page with few lines of code. We will be using CSS variables for theming. Please read my article on CSS Variables if it sounds new to you .
Step 1:
Declare the style for the light theme
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
Step 2:
Declare the class for the dark theme
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
// This is the class that will be added onclick of the button
Note: The variable names must be the same.
This can be done without variables by using only the body element. However, it is better to use CSS variables because many occasions require more than the background color to be changed. Some web app theming requires changing text colors, border colors, shadows, etc. So using a variable allows full control of all elements, especially in large applications.
Let's complete the styling of our web page. Ensure your CSS is linked to the HTML file.
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
body{
background: var(--bg);
color: var(--color);
font-family: monospace
}
.hero-sec{
display: flex;
justify-content: space-evenly;
color: var(--color);
margin-top: 48px;
}
.col1{
margin-top: 6rem;
height: 40%;
}
h1{
font-size: 2.5rem;
}
p{
font-size: 1.3rem;
}
button{
padding: 1rem 2rem;
background-color: #3f51b5;
color: #ffffff;
border: none;
cursor: pointer;
}
.hero-sec button{
font-size: 1.3rem;
}
Output
The logic behind switching themes
When a user clicks the toggle button, we expect two things to happen.
The theme or color mode of the website should change.
The text on the button should change.
To Change the theme
Manipulate the DOM (Document Object Model) to get the button and body of the web page.
Declare a function to add "dark" class to the body element (which we already declared in the css).
Call the function once a user clicks the dark/light mode button. Ensure your JS is linked to your HTML.
const toggleBtn = document.getElementById("toggle-button")
const body = document.body
function toggleTheme() {
body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);
To change the text
Add another block of code to the toggleTheme function. This code simply means that If the body contains the class "dark", toggle text to "Light mode" and vice versa.
if (body.classList.contains("dark")) {
toggleBtn.textContent = "Light Mode";
} else {
toggleBtn.textContent = "Dark Mode";
}
This can be done in one line for cleaner code.
toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"
Yes, You can switch themes now. Cool Right? Check the attached video for full demo.
In Conclusion
By following the steps outlined in this tutorial, you can provide your users with the flexibility to choose their preferred theme, making your web app more engaging and accessible.
If you enjoyed my article you can Buy Me A Coffee to Support my Work
Read my other articles on Progressive Web Apps, Innermost workings of the web, CSS Variables, A Beginner's guide to front-end dev and more.
Please Like, Comment, and Follow for more web-dev and tech-related articles. Happy Coding!!!
Top comments (0)