Dark mode has become a popular feature for websites and apps, offering users a visually comfortable alternative to bright screens, especially in low-light environments. Adding dark mode to your website not only improves user experience but also keeps your site modern and accessible. In this guide, you’ll learn how to implement dark mode easily using CSS and JavaScript.
Why Add Dark Mode?
- Reduces eye strain in low-light settings
- Saves device battery life on OLED screens
- Gives your website a sleek, modern look
- Meets user preferences and accessibility standards
Step 1: Define Light and Dark Mode Styles in CSS
Start by creating two sets of CSS rules: one for light mode (default) and one for dark mode. Use CSS variables for colors so switching themes becomes simpler.
Example CSS:
:root { --bg-color: #ffffff; --text-color: #222222; --link-color: #007bff; } [data-theme="dark"] { --bg-color: #121212; --text-color: #e0e0e0; --link-color: #4dabf7; } body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; } a { color: var(--link-color); }
Step 2: Add a Toggle Button in HTML
Create a simple button that users can click to switch between light and dark modes.
<button id="themeToggle">Toggle Dark Mode</button>
Style the button as needed with CSS.
Step 3: Write JavaScript to Switch Themes
Use JavaScript to listen for button clicks and toggle a data-theme attribute on the <html> or <body> element.
const toggleButton = document.getElementById('themeToggle'); toggleButton.addEventListener('click', () => { const currentTheme = document.documentElement.getAttribute('data-theme'); if (currentTheme === 'dark') { document.documentElement.removeAttribute('data-theme'); localStorage.setItem('theme', 'light'); } else { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); } });
Step 4: Remember User Preference with Local Storage
To persist the user’s theme choice across sessions, check local storage when the page loads and apply the saved theme.
window.addEventListener('DOMContentLoaded', () => { const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark') { document.documentElement.setAttribute('data-theme', 'dark'); } });
Step 5: Optional — Detect System Dark Mode Preference
You can also apply dark mode automatically if the user’s device is set to dark mode, using the prefers-color-scheme media query.
@media (prefers-color-scheme: dark) { :root { --bg-color: #121212; --text-color: #e0e0e0; --link-color: #4dabf7; } }
Or check in JavaScript:
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-theme', 'dark'); }
Final Thoughts
Adding dark mode enhances user experience and gives your website a professional edge. Using CSS variables and simple JavaScript makes it easy to implement and maintain. Whether you want a manual toggle or automatic system detection, these steps will help you add dark mode to any website quickly.
