Supporting Dark Mode on Your Website
Dark mode is an user interface mode that displays light text on a dark background. Dark mode is helpful for those viewing device screens at night, in dark environments, or otherwise find darker UI more accessible. The reduced brightness can reduce eye strain in low light conditions.
A typical scenario is that we already have a light theme on a website, and want to build support for a darker counterpart. When building this support, one of the themes has to be defined as the default that users get on their first visit. This should always be the light theme, although we can let the user’s browser make that choice for us.
When building dark mode support, we should always provide a manual way for the user to switch to the other theme in the website’s settings. This setting should include at least the following options:
- Light theme
- Dark theme
- Auto (system preference)
Changing mode based on user preference
If your website offers its themes as separate stylesheets, we can toggle between these stylesheets for each mode. By default, we should have the light stylesheet in the <head> section of the website:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Nord Design System themes as examples -->
<link rel="stylesheet" href="https://nordcdn.net/ds/css/3.4.0/nord.min.css">
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/8.1.1/nord-dark.css">
</head>
<body>
<label for="theme">Interface theme</label>
<select id="theme">
<option value="light">Light theme</option>
<option value="dark">Dark theme</option>
<option value="auto">Auto (system preference)</option>
</select>
</body>
</html>When the user switches the mode, we can toggle between these stylesheets:
// Select the menu
const menu = document.querySelector("select");
// Listen for a change event on the menu
menu.addEventListener("change", (event) => {
// If the selected mode is dark, change to dark theme
if (event.target.value === "dark") {
alert("Change theme to dark");
// Otherwise, change to light theme
} else {
alert("Change theme to light");
}
})Building support for OS dark mode
Many operating systems let users choose between light and dark mode directly in the system settings. The goal of 'Auto (system preference)' is to allow this type of usage. To support this, we can use a little bit of JavaScript to detect the user’s preference:
// Detect operating system dark mode
const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
// If the OS uses dark mode currently, change to dark theme
if (darkMode.matches) {
alert("Change theme to dark");
// Otherwise, change to light theme
} else {
alert("Change theme to light");
}Storing user’s preference
Ultimately, we also need to carry over this functionality when the user either visits another page on your website or reloads the current page. To achieve this, we need to save the user’s preference so that it will be applied consistently throughout the website and on subsequent visits. To do that, we can save the preference to localStorage:
// Get current mode from localStorage
const currentMode = localStorage.getItem("mode");
// If current mode is "dark", change to dark theme
if (currentMode === "dark") {
alert("Change theme to dark");
}
// Listen for a change event on the mode menu
menu.addEventListener("change", (event) => {
let mode = "light";
// If the selected mode is dark, change to dark theme
if (event.target.value === "dark") {
alert("Change theme to dark");
mode = "dark";
// Otherwise, change to light theme
} else {
alert("Change theme to light");
}
// Finally, save the choice into localStorage
localStorage.setItem("mode", mode);
});That’s it! Now you have a dark mode on your website that will correctly persist across pages and reloads.
