Adding a dark mode toggle button to your website is one of the easiest ways to enhance user comfort and provide a modern browsing experience. In this tutorial, we’ll guide beginner web developers step by step on how to create a dark and light mode switch using HTML, CSS, and jQuery.
Project Introduction
Before jumping into the code, let’s discuss why dark mode has become such a popular feature. Over the past few years, dark mode has been adopted across all major platforms — from iOS and Android to Windows and macOS — for its aesthetic appeal and usability benefits.
When users browse your website at night or in low-light environments, bright colors can cause eye strain. That’s why adding a dark theme option enhances readability and user comfort.
Benefits of Using Dark Mode
- Improved text readability
- Better contrast and visual appeal
- Reduced eye strain during night browsing
- Less screen flickering and blue light
- Lower energy consumption on OLED displays
A dark/light mode switch lets visitors choose between themes according to their preferences. Now, let’s dive into the implementation!
Step 1 – HTML Code
We’ll begin by creating the basic structure of our webpage. The following HTML code includes all necessary elements — a toggle switch, a title, an article section, and references to the CSS and JS files.
Make sure to save your file with a .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dark Mode</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="switch">Dark mode:
<span class="inner-switch">OFF</span>
</div>
<h1 class="title">Animals</h1>
<article>
<h1>Lion</h1>
<p><small>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, laudantium.</small></p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, nulla. Debitis qui quam, ratione totam voluptatibus vitae necessitatibus sit laudantium, optio quis nam quidem est officia nemo architecto cum repellendus dolores eveniet ullam eligendi porro?</p>
<img src="https://www.myritebook.com/wp-content/uploads/2025/11/Lion.jpg">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium tempora error deleniti eum facilis eaque neque laboriosam repellat molestiae deserunt, aliquid numquam a, nisi qui ipsa debitis obcaecati, voluptate expedita veritatis similique laudantium. Magni dolorum dolores labore eius aut. Fugiat.</p>
</article>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Step 2 – CSS Code
Next, we’ll design the page layout and define both light and dark mode styles. Save the following code in a file named styles.css.
body {
font-family: sans-serif;
font-size: 1.125rem;
display: flex;
flex-direction: column;
max-width: 50rem;
margin: 0 auto;
padding: 0 0.9375rem;
}
small {
font-style: italic;
}
article {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
display: block;
align-self: center;
}
.switch {
align-self: flex-end;
margin: 0.9375rem;
}
.inner-switch {
display: inline-block;
cursor: pointer;
border: 1px solid #555;
border-radius: 1.25rem;
width: 3.125rem;
text-align: center;
font-size: 1rem;
padding: 0.1875rem;
margin-left: 0.3125rem;
}
.dark,
.dark * {
background-color: #222;
color: #e6e6e6;
border-color: #e6e6e6;
}
This CSS ensures that the layout is responsive and visually clean in both light and dark themes.
Step 3 – JavaScript Code
Finally, let’s make our toggle functional using jQuery. Create a file named script.js and paste the following code:
$( ".inner-switch" ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
$( "body" ).removeClass( "dark" );
$( ".inner-switch" ).text( "OFF" );
} else {
$( "body" ).addClass( "dark" );
$( ".inner-switch" ).text( "ON" );
}
});
This simple script switches between dark and light modes dynamically, updating both the website appearance and the toggle button text.
Preview
Once you’ve added the HTML, CSS, and JavaScript, open your HTML file in a browser. Click on the “Dark mode” switch — it will instantly toggle between light and dark themes.
Conclusion
Congratulations! 🎉 You’ve successfully built a dark/light mode toggle button using HTML, CSS, and jQuery. This small but powerful feature can make your website more user-friendly, accessible, and visually appealing — especially for visitors browsing in low-light environments.
Start implementing it on your own website to give users more control over their viewing experience.