Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Dark/Light Mode for a Website using JavaScript/jQuery?
Dark mode has become essential for modern websites, as it reduces eye strain and saves battery life on mobile devices. Studies show that 70-80% of users prefer dark mode, making it a crucial feature for user experience.
In this tutorial, we'll learn to create a toggle between dark and light themes using JavaScript and jQuery. We'll use CSS classes and DOM manipulation to switch themes dynamically.
Syntax
The core method for toggling themes uses the classList.toggle() method:
document.body.classList.toggle("dark-theme");
This adds the "dark-theme" class if it doesn't exist, or removes it if it does, providing an easy way to switch between themes.
Algorithm
Follow these steps to implement dark/light mode functionality:
Step 1 ? Create HTML structure with default light theme CSS styling.
Step 2 ? Define CSS rules for dark theme using a specific class (e.g., ".dark-theme").
Step 3 ? Add a toggle button with click event handler.
Step 4 ? Use JavaScript to add/remove the dark theme class from the body element.
Method 1: Using JavaScript toggle() Method
This example demonstrates a simple button that switches between themes and updates its text accordingly:
<html>
<head>
<style>
body {
color: black;
background-color: rgb(241, 241, 241);
text-align: center;
padding: 2rem;
font-family: Arial, sans-serif;
}
.dark-theme {
color: white;
background-color: rgb(26, 20, 20);
}
button {
width: 13rem;
height: 2.5rem;
font-size: 1.2rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
margin-top: 1rem;
}
button:hover {
background-color: #0056b3;
}
p {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
</head>
<body>
<h2>Toggle Between Light and Dark Mode</h2>
<p>Click the button below to switch themes.</p>
<button onclick="changeMode()" id="modeButton">Switch to Dark Mode</button>
<script>
function changeMode() {
const body = document.body;
const button = document.getElementById('modeButton');
// Toggle the dark theme class
body.classList.toggle("dark-theme");
// Update button text based on current theme
if (body.classList.contains("dark-theme")) {
button.innerHTML = "Switch to Light Mode";
} else {
button.innerHTML = "Switch to Dark Mode";
}
}
</script>
</body>
</html>
Method 2: Using jQuery with Toggle Switch
This example creates a professional toggle switch using jQuery for smoother interactions:
<html>
<head>
<style>
body {
color: black;
background-color: rgb(241, 241, 241);
text-align: center;
padding: 2rem;
font-family: Arial, sans-serif;
transition: all 0.3s ease;
}
.dark-theme {
color: white;
background-color: rgb(32, 32, 32);
}
p {
font-size: 1.2rem;
margin: 1rem 0;
}
.toggle-container {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 2rem 0;
}
.toggle-switch {
width: 60px;
height: 30px;
position: relative;
display: inline-block;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 30px;
}
.slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #007bff;
}
input:checked + .slider:before {
transform: translateX(30px);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>Dark/Light Mode Toggle with jQuery</h2>
<p>Use the toggle switch to change themes.</p>
<div class="toggle-container">
<span>Light</span>
<label class="toggle-switch">
<input type="checkbox" id="themeToggle">
<span class="slider"></span>
</label>
<span>Dark</span>
</div>
<script>
$(document).ready(function() {
$('#themeToggle').change(function() {
if ($(this).is(':checked')) {
$('body').addClass('dark-theme');
} else {
$('body').removeClass('dark-theme');
}
});
});
</script>
</body>
</html>
Key Implementation Points
When implementing dark/light mode, consider these important aspects:
CSS Transitions: Add smooth transitions between themes using
transition: all 0.3s easeLocal Storage: Save user preferences to persist theme choice across sessions
System Preference: Detect user's system theme preference using
prefers-color-schememedia queryAccessibility: Ensure sufficient contrast ratios in both themes for better readability
Browser Compatibility
| Method | Browser Support | Performance |
|---|---|---|
| classList.toggle() | All modern browsers | Excellent |
| jQuery addClass/removeClass | All browsers with jQuery | Good |
Conclusion
Implementing dark/light mode enhances user experience significantly. Use classList.toggle() for vanilla JavaScript or jQuery methods for more complex interactions. Remember to add smooth transitions and consider saving user preferences for the best experience.
8K+ Views
