Nowadays, a website can be viewed on different types of devices. And, the users on these devices have different preferences related to system-wide color schemes for UI and websites. These preferences are system default, a dark theme, and a light theme. Modern web browsers can pick these preferences which in turn can be picked by a website to render the preferred color scheme for the visitor. Today, we're going to learn about different ways to add a dark mode to a website. It gives an option to visitors who prefer a darker version over the white background pages. Let's see how to do it in a few easy steps.
Needless to say, if you have a working knowledge of HTML and CSS, you can implement the methods mentioned below—easily. Else, you may struggle a bit. A relatively easy solution is also given at the end.
Always integrate and test these methods on a staging website before transferring the updated code to the live version. Always ask your friends and contacts to visit your modified staging site to test it thoroughly.
1. Through CSS and JavaScript
The most flexible and reliable method to add a dark mode to a website is the use of CSS modern features with a sprinkle of JavaScript. It works seamlessly in all modern web browsers.
To get started, first of all, define the styles for both the light and dark modes.
/* Light mode CSS styles */
body {
background-color: #fff;
color: #333;
}
/* Dark mode CSS styles */
body.dark-mode {
background-color: #333;
color: #fff;
}Note, we've added the .dark-mode class to the target element. We'll toggle this class through JavaScript.
Now, one way is to automatically detect the user's system color preferences and accordingly swtich to the dark mode—automatically. Here, we're not depending on the visitor to decide but giving him the dark version based on his color preferences.
And, for that, all we need to do is to write the following CSS media query.
/* Switch to dark mode based on system color preferences */
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #fff;
}
}Here, we do not give an option to the visitor if he wants to switch to dark mode or not. Another approach is to offer a button or a slider on the website. If the visitor wants, he can explicitly click that button to switch to the dark mode. Here's how to do it.
/* Mode button */
const modeButton = document.getElementById("mode-button");
/* Toggle dark mode class on the target element */
modeButton.addEventListener("click", function() {
document.body.classList.toggle('dark-mode');
});Now all you have to do is to create a button or a slider and listen to the click event on that element. Upon a click, simply fire the JavaScript function shown above. And, that's it!
Here's a readymade slider-triggered dark mode system you can use and improvise on to quickly implement this feature on your website.
2. Through 3rd party Plugins and Frameworks
If you're technically challenged and still want to add this feature to your website, there are chances that you may find a 3rd-party plugin or a framework for the same.
The first one is the Dark Mode Switch utility which you can either use on a static website or a website powered by any CMS.
It requires minimal understanding of coding and mostly involves copy-pasting of code within your website. Do give it a try—once.
If your website is powered by WordPress, you can use the WP Dark Mode plugin to integrate this functionality without messing your hands with code.