javascript dark mode – Add Dark Mode using localStorage

Dark Mode (use javascript for dark mode) or Dark Theme on websites has become quite common lately. And with this trend in iOS, macOS & Windows, most systems or apps have already adopted the same dark themes.

“Dark mode” makes your site more attractive to users who prefer darker colors. The user experience will be better if you allow functionality to switch between light theme and dark theme.

In this short post, I will show how to add dark mode using javascript and localStorage, one that works the same way as the button at the bottom right of the screen in this blog.

Create the relevant CSS files

For starters create two CSS files, one light-theme.css that will be blank and the other named dark-theme.css that will contain all the CSS settings for the same javascript dark mode, i.e. for the same Dark Mode on your site.

The light-theme.css file will be empty because Light Theme is actually the standard CSS of the site. It may sound a bit redundant or less effective, but if you know or are able to create a better way to implement it we would be very happy if you share us in the comments.

Add these files to the CSS folder on your site. Then add a call to the CSS file in the site’s head as follows:

<link id="light-theme-css-link" rel="stylesheet" type="text/css" href="/your-path/light-theme.css"/>

Note that you change the path to a file depending on its location in the site folder.

javascript dark mode – Create a button to switch to dark mode

Creating a button that switches between the modes We will add the following markup to the Footer of our site:

<button id="toggle-mode-button">Change Mode</button>

Example CSS code for positioning and designing the button at the bottom right of the window

#toggle-mode-button {
    position: fixed;
    right: 12px;
    left: auto;
    bottom: 12px;
    display: inline-block;
    z-index: 1000;
    text-indent: -999999px;
    width: 40px;
    height: 40px;
    background: linear-gradient(-45deg, #ffd600, #ffd600 49%, #fefefe 49%, #fefefe 51%, #2d2d2d 51%);
    border-radius: 50%;
    border: 0;
}

The JavaScript that will switch between the modes

In order to maintain the user’s setting so that the information in which situation he is interested in viewing the site, we will use localStorage. If you do not know, localStorage is a functionality that allows you to save pairs of key/value in your browser.

The information in localStorage is stored in the browser even after the page is refreshed and even after the user reboots the browser.

You can check which values are saved for a particular site in localStorage using the browser’s Developer Tools under the Application tab. Here’s an example of what it looks like in Chrome Dev Tools:

Let’s see the code we use to save this value in the browser, and then explain it a bit. This is the function:

document.addEventListener('DOMContentLoaded', () => {
    const themeStylesheet = document.getElementById('toggle-mode-button');
    const themeToggle = document.getElementById('toggle-mode-button');
    const storedTheme = localStorage.getItem('themeColor');

    if (storedTheme) {
        themeStylesheet.href = storedTheme;
    }
    themeToggle.addEventListener('click', () => {
        // if it's dark -> go light
        if (themeStylesheet.href.includes('dark')) {
            themeStylesheet.href = '/your-path/light-theme.css';
            themeToggle.innerText = 'Switch to light mode';
        } else {
            // if it's light -> go dark
            themeStylesheet.href = '/your-path/dark-theme.css';
            themeToggle.innerText = 'Switch to dark mode';
        }
        // save the preference to localStorage
        localStorage.setItem('themeColor', themeStylesheet.href)
    })
})

We run the function only after DOMContentLoaded, this is an event that indicates that all the HTML is loaded and parsed without waiting for images, CSS files and the like to load.

Before we explain the code, note that you are changing the path within the second block if to the correct path of the CSS files we created earlier.

A few words on the code up

The code is pretty simple to understand – first we target the same link to the CSS file we added in the site’s head and put it into a variable called themeStylesheet.

We then target the button we created, the one that switches between dark mode and normal mode, and put it into a variable called themeToggle.

We then check for information in the browser’s localStorage key called themeColor. If it exists, that is, if the user previously clicked the button and the preferred mode setting already exists in localStorage, then it is determined that the link to the CSS file will contain the address of that relevant CSS file, whether the dark-theme.css or light-theme.css file.

If it was not clear – the value of the same key we keep in localStorage would be the URL of the relevant CSS file, i.e. one of the same files we created earlier – light-theme.css or the dark-theme.css file.

We then listen to the event at the click of a button, if the address of the CSS file contains the word dark, we will replace the address with the clear CSS file, ie light-theme.css which has no special CSS setting. And of course, the same action is performed in the opposite case and an address contains the word light.

And finally, we make sure that if there is nothing in localStorage, you will save the address name for the light-theme.css file that does not contain any special definition.

In conclusion

In this post, we explained how to add “Dark Mode” to your site. I did not mention this in the post, but the use of CSS Variables can be excellent in this case.