How to Add Dark Mode to Your Website
Dark mode has become increasingly popular, offering users a more comfortable viewing experience in low-light environments and potentially reducing eye strain. In this guide, we'll show you how to implement a simple yet effective dark mode toggle for your website.
Setting Up CSS Variables
The first step is to set up CSS variables for your light and dark themes. These will control colors throughout your website.
:root {
/* Light mode (default) */
--background: #ffffff;
--text: #121212;
--accent: #0077cc;
--secondary-bg: #f5f5f5;
--border: #e2e2e2;
}
[data-theme='dark'] {
/* Dark mode */
--background: #121212;
--text: #f5f5f5;
--accent: #3399ff;
--secondary-bg: #1e1e1e;
--border: #333333;
}
body {
background-color: var(--background);
color: var(--text);
transition: all 0.3s ease;
}
JavaScript Toggle Function
Next, you'll need a JavaScript function to toggle between light and dark modes:
// Check for saved theme preference or use device preference
const prefersDarkMode = window.matchMedia(
'(prefers-color-scheme: dark)'
).matches;
const savedTheme = localStorage.getItem('theme');
// Apply the saved theme or use device preference
if (savedTheme === 'dark' || (!savedTheme && prefersDarkMode)) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
// Function to toggle theme
function toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
// Set the new theme
document.documentElement.setAttribute('data-theme', newTheme);
// Save the preference
localStorage.setItem('theme', newTheme);
}
// Add event listener to your toggle button
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
Adding the Toggle Button
Now, let's create a simple and intuitive toggle button using HTML and CSS:
<button
id="theme-toggle"
aria-label="Toggle dark mode"
>
<svg
class="sun-icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-18a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1zm0 18a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1zM2 12a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm18 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1z"
/>
</svg>
<svg
class="moon-icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"
/>
</svg>
</button>
Styling the Toggle Button
#theme-toggle {
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
background-color: var(--secondary-bg);
display: flex;
align-items: center;
justify-content: center;
}
.sun-icon,
.moon-icon {
fill: var(--text);
transition: opacity 0.3s ease;
}
[data-theme='light'] .moon-icon,
[data-theme='dark'] .sun-icon {
display: none;
}
Testing Across Browsers
Make sure to test your dark mode implementation across different browsers to ensure consistent behavior. Most modern browsers support CSS variables and the prefers-color-scheme media query.
By following these steps, you can add a user-friendly dark mode toggle to your website that respects user preferences and enhances the overall user experience.
Remember that the key to a good dark mode implementation is not just inverting colors, but carefully selecting a color palette that reduces eye strain while maintaining readability and visual hierarchy.
