Night Mode Toggle Across the Website!

I’m not proud of using smartphone to read articles on the bed. But this is a habit many people have. Reading in low light is bad for your eyes if the phone emits a lot of bright light.

Dark mode

There are apps that you can use to reduce the light. A better option is to have a dark theme. Reddit already has this option. Maybe they’re aware of their users being nocturnal!

How to create a dark mode?
Store value across the domain
sessionStorage to switch theme
Conclusion

How to create a dark mode?

When I thought of this problem, I knew JavaScript can do it but I’m a noob in JS. I don’t really create my own script. I copy from some pre-existing script and make changes as I like.

But this seemed very easy and I gave it a try. I wrote something on my own which was a horrible code.

<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="background-color: rgb(255, 255, 255)">
    <p>The button below will switch background color!</p>
    <button onclick="dark()">Switch color</button>


    <script>
    function dark() {
        if (document.body.style.backgroundColor == 'rgb(255, 255, 255)') {

                document.body.style.backgroundColor = '#333';
        }
        else {
                document.body.style.backgroundColor = 'rgb(255, 255, 255)';
        }
    }
    </script>

</body>
</html>

Copy the code, save as HTML file and open in a browser to see how this works. It is pretty much like the first box in the demo.

Demo

This one works as expected. But I tell you this wasn’t easy. First thing is that the JS recognized only RGB code and not HEX. It took me a while to figure that out. It switches background color inline only. Also if you refresh the browser, background color goes back to default.

Store value across the domain

The problem with this approach is that it is specific to a page. If you switch the theme to dark and navigate to another page in the same domain then it will go back to its normal light theme.

We want it to remember the last switch and keep it across the domain. So if a user switches the theme once then it should remain switched unless he restarts the browser.

Using cookies is one option but it is so yesterday. Europeans know the headache of using cookies on a website.

A better way is to use either localStorage or sessionStorage. HTML5 has these options to store up to 5MB of data until you close the browser(sessionStorage) or clear the cache(localStorage).

After searching through StackOverflow and MDN, I came up with a working code.

sessionStorage to switch theme

Here is a demo of the same box which not only switches its color but also retains it even if you refresh the page! Check out the demo by navigating to some other page and come back to the demo. The box will still be dark!

Demo

This uses sessionStorage. If you close the browser and open this link again, you’ll see that the box goes back to default background.

I have used this in my new theme Hagura.

Here is the code I have used to make this happen.

document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
function darker() {
     if ( sessionStorage.getItem('bg') === 'rgb(255, 255, 255)') {

            sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
            sessionStorage.setItem('cc', '#777');


     }
    else if (sessionStorage.getItem('bg') == null || undefined) {
        sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
        sessionStorage.setItem('cc', '#777');

    }
    else if( sessionStorage.getItem('bg') === 'rgb(6, 23, 37)') {

        sessionStorage.setItem('bg', 'rgb(255, 255, 255)');
        sessionStorage.setItem('cc', '#333');


    }

document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');

}

This for me looks way too long to do such a simple job. But as I told before I’m a novice JavaScript coder. I coded it to get the work done. I think it can be improved.

1. It needs to be simple. If you observe the code, there is a lot of repetitive values which can be minimized.

2. ~~It should not refresh. The changed color will not apply unless the page is refreshed. This is an inconvenience. I hope this can be solved by someone who knows JS.~~

I figured it out. Now the color switches without refresh!