Build a Dark Mode Switcher with HTML, CSS, and JavaScript
This step‑by‑step tutorial shows how to create a dark‑mode toggle for a web page using HTML structure, CSS styling (including dark‑mode rules), and a small JavaScript script that adds or removes the dark class on user interaction.
Modern operating systems and applications like macOS and MS Office support dark mode, and many websites now offer a dark‑theme switch. This article explains how to implement a simple dark‑mode toggle using HTML, CSS, and JavaScript.
1. HTML
The HTML provides a basic page skeleton, a checkbox that acts as the toggle, and an article section to demonstrate the effect.
<!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" />
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<link rel="stylesheet" href="./index.css" />
<title>Dark Mode Switcher</title>
</head>
<body>
<main class="blog container">
<div class="content">
<section class="mode-switch">
<div class="form-check form-switch">
<input type="checkbox" id="toggle-btn" class="form-check-input shadow-none" />
<label for="toggle-btn" class="form-check-label">Toggle Dark Mode</label>
</div>
</section>
<section class="article-section">
<article>
<h1 class="article-heading">How to implement Dark Mode in JavaScript</h1>
<span class="read-time text-muted">2 min read</span>
<p class="article-body">Hello 👋, my gorgeous friend on the internet 😍<br />Before we continue, you have to switch to dark mode 👆. Now switch back and that is what we will build together in <a href="http://" target="_blank" rel="noopener noreferrer">THIS</a> article.<br /></p>
<h3 class="article-sub--heading">History Of Lorem</h3>
<...additional placeholder text omitted for brevity...>
</article>
</section>
</div>
</main>
<script src="./index.js"></script>
</body>
</html>When the page loads correctly, the browser should display a light‑theme layout similar to the screenshot below.
2. CSS
The CSS defines base styles, imports a Google Font, and adds a .dark rule set that changes background and text colors when the dark class is present.
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,800;1,900&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins";
}
#toggle-btn { cursor: pointer; }
.blog {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 60vh;
}
main .content { max-width: 90%; }
.mode-switch { margin: 2rem 0; }
.article-heading { text-transform: uppercase; margin-top: 2.5rem; }
.article-sub--heading { margin-top: 2rem; }
.article-body { margin-top: 1rem; line-height: 2; }
/* DARK MODE */
.dark.blog {
transition: 0.9 all ease;
background-color: #202124;
}
.dark .content { color: #fdfdfd; }
.dark .article-heading { font-weight: 800; }
.dark .article-sub--heading { font-weight: 700; }
@media (min-width: 900px) {
main .content { max-width: 70%; }
}After applying the CSS, the page in dark mode looks like the following screenshot.
3. JavaScript
The JavaScript selects the page container and the toggle button, defines a function that toggles the dark class on the container, and binds this function to the button’s click event.
// DOM
const blogContainer = document.querySelector('.blog');
const toggleButton = document.querySelector('#toggle-btn');
// Function to switch the theme
const switchTheme = () => {
blogContainer.classList.toggle('dark');
};
// Bind event to the toggle button
toggleButton.addEventListener('click', switchTheme);When the user clicks the checkbox, the script adds or removes the .dark class, instantly switching the page between light and dark themes.
Feel free to experiment by letting users choose their preferred theme.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.