How To Implement A Dark Mode with JavaScript and Web Storage?

If you've spent any time at all on the internet, you've probably noticed that many popular websites offer a dark mode. This feature is a popular choice for users who prefer a less bright and less eye-straining user interface. In this blog post, we'll guide you through the process of implementing a dark mode in your own website, using JavaScript and Web Storage. This will not only enhance the user experience on your site but also give you a better understanding of how to manipulate the DOM using JavaScript, and how to use Web Storage.

What is Dark Mode?

Before we dive into the coding part, let's first understand what dark mode is. Dark mode is a supplemental mode that uses color schemes that emit less light. The design reduces the light emitted by the device screen while maintaining the minimum color contrast ratios required for readability.

Why Implement Dark Mode?

Implementing dark mode provides numerous benefits, including reducing eye strain in low-light conditions, saving energy (especially in OLED or AMOLED displays), and increasing accessibility. Not to mention, it also adds a cool factor to your website!

Understanding JavaScript and Web Storage

JavaScript is a high-level, interpreted scripting language that is used to make webpages interactive. It's one of the core technologies of web development and can be used on the client-side to create responsive and interactive elements for your web page.

Web Storage, on the other hand, is a simple key-value store that is used for storing data in web browsers. There are two types of web storage: Local Storage and Session Storage. Local Storage is designed to hold data indefinitely, while Session Storage holds data for one session.

How to Implement Dark Mode with JavaScript and Web Storage

Now, let's get into the crux of our blog post: implementing a dark mode using JavaScript and Web Storage.

Step 1: Creating the HTML Structure

First, we'll create a simple HTML structure with a button that will be used to toggle the dark mode on and off. Here's our sample HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dark Mode Demo</title>
</head>
<body>
    <h1>Welcome to codedamn Blog</h1>
    <p>This is a sample blog post to demonstrate dark mode.</p>
    <button id="toggle-button">Toggle Dark Mode</button>
</body>
</html>

Step 2: Adding CSS

Next, we'll create two sets of CSS: one for the default (light) mode, and one for the dark mode. The dark mode CSS is applied only when the body has a class of dark-mode.

body {
    background-color: #fff;
    color: #333;
}

body.dark-mode {
    background-color: #333;
    color: #fff;
}

Step 3: Implementing the JavaScript

Now, we'll write the JavaScript that toggles the dark mode. We'll use JavaScript to add or remove the dark-mode class to the body when the user clicks the button. We'll also use Local Storage to remember the user's choice and apply it when they return to the site.

const toggleButton = document.getElementById('toggle-button');
const body = document.body;

// Check for saved 'darkMode' in localStorage
const darkMode = localStorage.getItem('darkMode');

if (darkMode) {
    body.classList.add('dark-mode');
}

toggleButton.onclick = function() {
    body.classList.toggle('dark-mode');

    // Save the current preference to localStorage
    localStorage.setItem('darkMode', body.classList.contains('dark-mode'));
}

FAQs

Q: Can I use cookies instead of Web Storage to store the user's theme preference?

A: Yes, you can. However, Web Storage offers a better API and more storage capacity. Also, unlike cookies, Web Storage does not send the stored data with every HTTP request, which can improve performance.

Q: Can I use this method to implement other themes, not just a dark mode?

A: Absolutely! You can extend this method to implement any number of themes. Just add more CSS classes for each theme, and modify the JavaScript to switch between them.

Q: What browsers support Web Storage?

A: All modern browsers, including Chrome, Firefox, Safari, Opera, and IE8+, support Web Storage.

For more details, you may refer to the official MDN Web Docs.

And that's it! You've now successfully implemented a dark mode using JavaScript and Web Storage. To further enhance this, you might want to add a smooth CSS transition when switching between the themes. Happy coding on codedamn!