Tags: dark mode, website design, CSS, JavaScript, media queries
Introduction
In this blog post, I will explain how I added dark mode to my website. Dark mode has become a popular feature that allows users to switch between a light and dark color scheme for better readability and reduced eye strain. I will discuss the new prefers-color-scheme
media feature as well as the method I used before it was available. So, let’s get started!
Prefers-color-scheme
Media Feature
The recent release of Media Queries Level 5 specification introduced the prefers-color-scheme
media feature. This feature allows web developers to detect if the user is browsing the page in dark or light mode. It is supported in all major browsers, including Chrome/Edge, Firefox, and Safari.
To implement dark mode using prefers-color-scheme
, you can use the following CSS:
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
By default, I show a light version of the site using CSS, and if the system is in dark mode, I apply the dark mode styles.
If the user’s system does not have dark mode built-in (e.g., older Windows/macOS or Linux), I recommend using browser extensions like Night Eye or similar.
Implementing Dark Mode Before prefers-color-scheme
Before the prefers-color-scheme
feature was available, I implemented dark mode using JavaScript. Here’s how I did it:
-
Redesigned the Website: I recently redesigned my website for a better user experience and readability.
-
Added Moon Emoji: I added a Moon Emoji 🌓 in the sidebar to provide a way for users to switch between light and dark modes.
-
JavaScript Snippet: I added a JavaScript snippet that runs when the Moon Emoji is clicked. The snippet toggles a
dark
class on thebody
element based on the current mode stored in the local storage. Here’s the JavaScript code:
localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark');
localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark');
- DOM Load Event: I used another JavaScript code that runs when the DOM loads. This code checks if the mode is set to
dark
in the local storage and adds thedark
class to thebody
element accordingly. Here’s the code:
document.addEventListener('DOMContentLoaded', (event) => {
(localStorage.getItem('mode') || 'dark') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark');
});
- CSS Styles: I added CSS rules prefixed with
.dark
to style the website in dark mode. For example:
body.dark {
background-color: rgb(14,20,10);
color: #fff;
}
body.dark code[class*=language-],
body.dark table tbody>tr:nth-child(odd)>td,
body.dark table tbody>tr:nth-child(odd)>th {
background: #282c34;
}
By default, I added the dark
class to the body
element to make dark mode the default mode. I made this decision based on personal preference and a Twitter poll.
Conclusion
Adding dark mode to my website was a fun and rewarding experience. With the new prefers-color-scheme
media feature, implementing dark mode has become even easier and more efficient. However, even before this feature was available, I found a practical solution using JavaScript and CSS. By providing a way for users to switch between light and dark modes, I enhanced the user experience and ensured readability in different lighting conditions.
Now, my website offers the best viewing experience for both day and night use. Give it a try and let me know what you think!
Additional Tags
responsive design, coding blog, UI/UX, user preferences