Designing Dark Mode for Your Website with CSS Variables and JavaScript
Dark mode has become an increasingly popular feature in web and app design, offering users an alternative appearance that is easier on the eyes in low-light conditions or at night. In this tutorial, we will go through the process of creating a dark mode theme for your website using CSS variables and JavaScript. We will also discuss the benefits of implementing dark mode in terms of design, user experience and accessibility.
What is Dark Mode and Why is it Important?
Dark mode is an optional theme that changes the default light-colored background and UI elements to darker tones, making it more comfortable for users to view in low-light environments. It not only enhances the user experience but also improves accessibility for visually impaired or sensitive users. Additionally, dark mode often saves battery life on devices with OLED displays, like smartphones and tablets.
Setting Up CSS Variables
To begin, we will set up some CSS variables to make it easier to switch between light and dark themes. This is done using the :root selector, which targets the topmost element in the document, and the -- syntax. The following code sets up six variables for background, text and accent colors:
:root {
--bg-color-light: #ffffff;
--bg-color-dark: #232323;
--text-color-light: #000000;
--text-color-dark: #ffffff;
--accent-color-light: #4e4e4e;
--accent-color-dark: #757575;
}
Next, we need to apply these variables to our HTML elements. For example, let's say we want to apply the background and text colors to the body of the document:
body {
background-color: var(--bg-color-light);
color: var(--text-color-light);
}
We use the var() function to refer to the corresponding CSS variable.
Creating a Dark Mode Theme with CSS
With our CSS variables set up, we can create a dark mode theme by selecting the appropriate variables when a specific class is added to the <body> element. In this example, we will use the class .dark-theme:
body.dark-theme {
background-color: var(--bg-color-dark);
color: var(--text-color-dark);
}
When the .dark-theme class is applied to the <body> element, the background and text colors will switch to their darker alternatives.
Using JavaScript to Toggle Dark Mode
We'll now use JavaScript to add an event listener to a button, which toggles the dark mode theme on and off. First, let's create a simple button in our HTML:
<button id="theme-toggle">Toggle Dark Mode</button>
Now, let's write the JavaScript code to add functionality to our button:
const themeToggle = document.getElementById('theme-toggle');
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
});
This code gets the button element by its ID and, when clicked, toggles the .dark-theme class on the body element. This results in our website switching between light and dark modes.
Remembering User Preferences
To enhance the user experience further, we can remember their theme preference using the browser's localStorage:
// Set the chosen theme on page load
if (localStorage.getItem('darkThemeEnabled')) {
document.body.classList.add('dark-theme');
}
// Toggle the theme and save the preference
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
if (document.body.classList.contains('dark-theme')) {
localStorage.setItem('darkThemeEnabled', true);
} else {
localStorage.removeItem('darkThemeEnabled');
}
});
The above code checks if the darkThemeEnabled item exists in localStorage and sets the theme accordingly when the page loads. Additionally, it saves or removes the item when the theme is toggled.
Conclusion
By using CSS variables and JavaScript, you can now create a dark mode theme for your website that dynamically switches styles and remembers user preferences. This not only improves the user experience but also enhances accessibility and makes your website stand out in the increasingly crowded online space.