This project demonstrates a simple implementation of a Dark Mode & Light Mode toggle using CSS and JavaScript. It allows users to switch between themes, and the selection is stored in localStorage to persist across sessions.
📺 Watch the tutorial on Video Tutorial 📖 Read the blog post on Blog Tutorial
✅ Simple & Lightweight – No external libraries required
✅ Smooth Theme Transition – Uses CSS variables for easy customization
✅ Local Storage Support – Remembers the user's preference
✅ Responsive Design – Works on all screen sizes
📂 dark-mode-toggle
├── index.html # Main HTML file with theme toggle button
├── README.md # Project documentation
- Clone the Repository
git clone https://github.com/docode537/theme-toggler-using-css-and-js.git-
Open
index.htmlin a browser -
Click the Toggle Button to switch between Light and Dark mode 🎨
-
The selected mode is saved and remains after refreshing the page 🔄
-
The
data-themeattribute on the<body>element controls the theme. -
CSS variables (
:root) define colors for Light Mode and Dark Mode. -
JavaScript listens for button clicks and switches themes accordingly.
-
LocalStorage saves the selected theme, so it persists across sessions.
<body data-theme="light">
<h1>Dark Mode & Light Mode Using CSS and JS</h1>
<button class="themeToggler">🌙 Toggle Dark Mode</button>
</body>const themeToggler = document.querySelector('.themeToggler');
const body = document.body;
function initTheme() {
body.setAttribute('data-theme', localStorage.getItem('theme') || 'light');
}
function toggleTheme() {
let currentTheme = body.getAttribute('data-theme');
let nextTheme = currentTheme === 'light' ? 'dark' : 'light';
localStorage.setItem('theme', nextTheme);
body.setAttribute('data-theme', nextTheme);
}
themeToggler.addEventListener('click', toggleTheme);
initTheme();Want to customize the theme colors? Edit the CSS variables in the <style> section of index.html:
:root {
--bg: #ececec;
--text: black;
--primaryBg: #c0c0c0;
--primaryText: #1b1b1b;
}
body[data-theme="dark"] {
--bg: #121212;
--text: #ffffff;
--primaryBg: #222;
}📢 Feel free to fork, modify, and use it in your projects!
📧 Email: docode537@gmail.com
🌍 Website: docoe.co.in
📷 Youtube: @docode537
Don't forget to ⭐ the repo if you like it! 🚀