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
Selected Reading
How to switch between dark and light mode with CSS and JavaScript?
To switch between dark and light mode with CSS and JavaScript, you can use CSS classes to define the different themes and JavaScript to toggle between them dynamically.
Syntax
/* CSS for light mode (default) */
body {
background-color: white;
color: black;
}
/* CSS for dark mode */
.dark-mode {
background-color: black;
color: white;
}
Example
The following example demonstrates how to create a toggle button that switches between light and dark themes −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
.dark-mode {
background-color: #1a1a1a;
color: #ffffff;
}
.toggleButton {
padding: 12px 20px;
font-size: 18px;
border: 2px solid #4CAF50;
background-color: #4CAF50;
color: white;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.toggleButton:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Toggle Dark/Light Mode Example</h1>
<button class="toggleButton">Toggle Dark Mode</button>
<h2>Click the above button to toggle dark mode</h2>
<p>This is a sample paragraph to demonstrate the theme switching functionality.</p>
<script>
document.querySelector(".toggleButton").addEventListener("click", toggleDarkMode);
function toggleDarkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
// Update button text based on current mode
var button = document.querySelector(".toggleButton");
if (element.classList.contains("dark-mode")) {
button.textContent = "Toggle Light Mode";
} else {
button.textContent = "Toggle Dark Mode";
}
}
</script>
</body>
</html>
A webpage displays with white background and black text. A green toggle button allows switching between light mode (white background, black text) and dark mode (dark background, white text). The button text updates to reflect the current action available. Smooth transitions animate the color changes.
Key Points
- The
classList.toggle()method adds or removes the "dark-mode" class - CSS transitions provide smooth color changes between themes
- The button text updates dynamically to reflect the current state
- Default styles define the light theme, while the dark-mode class overrides them
Conclusion
Creating a dark/light mode toggle is straightforward using CSS classes and JavaScript's classList.toggle() method. This approach provides a smooth user experience with minimal code and can be extended to save user preferences in localStorage.
Updated on: 2026-03-15T14:58:20+05:30
495 Views
Advertisements