English
Dutch
Dark/Light Mode Toggle with Local Storage
Contents
Why Add Dark Mode
Dark Mode reduces eye strain and enhances battery life on OLED screens. It’s now a standard feature users expect in modern apps.
Code Example (Simple HTML Base):
Language: HTML
<body>
<h1>Welcome to My Site</h1>
<p>This page will support dark/light theme switching.</p>
</body>How It Works
We’ll toggle a CSS class (dark) on the <body> and define theme colors with CSS variables.
JavaScript will handle user clicks and save their preference.
Basic HTML Structure
We need a simple button to toggle the theme.
Language: HTML
<button id="themeToggle">🌙 Toggle Dark Mode</button>Define Light and Dark Variables
We’ll use CSS variables (--bg-color, --text-color) to control colors.
Code Example (CSS):
Language: CSS
:root {
--bg-color: #ffffff;
--text-color: #111827;
}
body {
background: var(--bg-color);
color: var(--text-color);
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
padding: 2rem;
}
body.dark {
--bg-color: #111827;
--text-color: #f9fafb;
}Toggle Theme Function
We’ll switch between themes by adding/removing a .dark class.
Language: JAVASCRIPT
const toggleBtn = document.getElementById('themeToggle');
const body = document.body;
toggleBtn.addEventListener('click', () => {
body.classList.toggle('dark');
});Save User Preference
We’ll store the user’s selection in Local Storage to persist after reload.
Language: JAVASCRIPT
toggleBtn.addEventListener('click', () => {
body.classList.toggle('dark');
const theme = body.classList.contains('dark') ? 'dark' : 'light';
localStorage.setItem('theme', theme);
});Load Saved Theme on Page Load
When users revisit the page, we restore their preference.
Language: JAVASCRIPT
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark');
}
});Animated Toggle Button
We’ll add a smooth button transition and emoji icon switch.
Language: JAVASCRIPT
const btn = document.getElementById('themeToggle');
btn.addEventListener('click', () => {
const darkMode = document.body.classList.toggle('dark');
btn.textContent = darkMode ? '☀️ Light Mode' : '🌙 Dark Mode';
localStorage.setItem('theme', darkMode ? 'dark' : 'light');
});CSS:
Language: CSS
button {
background: #2563eb;
color: #fff;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #1e40af;
}Auto-Detect System Theme (Optional)
We can auto-set dark mode if the system prefers dark.
Language: JAVASCRIPT
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.classList.toggle('dark', savedTheme === 'dark');
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
});Full HTML Code
Language: HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark/Light Mode Toggle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="themeToggle">🌙 Dark Mode</button>
<h1>Hello, Developer!</h1>
<p>Switch between dark and light themes instantly.</p>
<script src="script.js"></script>
</body>
</html>Full CSS Code
Language: CSS
:root {
--bg-color: #ffffff;
--text-color: #111827;
}
body {
background: var(--bg-color);
color: var(--text-color);
font-family: 'Inter', sans-serif;
transition: all 0.3s ease;
padding: 2rem;
}
body.dark {
--bg-color: #111827;
--text-color: #f9fafb;
}
button {
background: #2563eb;
color: #fff;
padding: 0.6rem 1.2rem;
border-radius: 6px;
border: none;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #1e40af;
}Full JavaScript Code
Language: JAVASCRIPT
const btn = document.getElementById('themeToggle');
// Load saved or system theme
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
document.body.classList.add('dark');
btn.textContent = '☀️ Light Mode';
}
});
// Toggle theme and save
btn.addEventListener('click', () => {
const dark = document.body.classList.toggle('dark');
btn.textContent = dark ? '☀️ Light Mode' : '🌙 Dark Mode';
localStorage.setItem('theme', dark ? 'dark' : 'light');
});Keep Colors Accessible
Always test your dark theme with accessibility tools to ensure sufficient contrast.
Integration Tip
If you use Laravel Blade, wrap the toggle in a reusable component so it appears across all pages:
Language: BLADE
@include('partials.theme-toggle')