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:

  1. Redesigned the Website: I recently redesigned my website for a better user experience and readability.

  2. Added Moon Emoji: I added a Moon Emoji 🌓 in the sidebar to provide a way for users to switch between light and dark modes.

  3. JavaScript Snippet: I added a JavaScript snippet that runs when the Moon Emoji is clicked. The snippet toggles a dark class on the body 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');
  1. 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 the dark class to the body 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');
});
  1. 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