DEV Community

Cover image for Creating a toggleable dark mode theme
Seth A Burleson
Seth A Burleson

Posted on

Creating a toggleable dark mode theme

Read it on My Blog, The Coder's Codex

It can be surprisingly simple to add a dark mode toggle to your site, but the challenging part can be making that choice persist for the user throughout your app.

Step 1: Allowing the toggle

I'm using AdminLTE as a template(its free to download and its great), which luckily has a wonderful little class ("dark-mode") that can be applied to the body to quickly apply a dark theme to the whole site. Adding a button with the onclick function "toggleDark()" allowed me to access the function I wrote in my site.js file.

function toggleDark() {
    var element = document.getElementById("layoutBody")
    element.classList.toggle("dark-mode")
}
Enter fullscreen mode Exit fullscreen mode

That was really all it took to be able to toggle, once I added the #layoutBody Id to my body element. Then came the tougher part, making that persist across multiple pages

Step 2: Saving user preference to Localstorage

Using localstorage, we can save the user's preference to the browser.

I wrote a function called loadDark() that takes care of this, and called it using jquery.

function loadDark() {
    //default is light mode
    console.log("dark mode is ", JSON.parse(localStorage.getItem("jamesonDarkMode")))
    let dark = JSON.parse(localStorage.getItem("jamesonDarkMode"))
    if (dark === null) {
        localStorage.setItem("jamesonDarkMode", JSON.stringify(false))
    }
    else if (dark === true) {
        document.getElementById("layoutBody").classList.add("dark-mode")
    }
}
Enter fullscreen mode Exit fullscreen mode

And the Jquery:

    <script>
        $(window).on("load",loadDark());
    </script>
Enter fullscreen mode Exit fullscreen mode

This will create a default user preference, but theres no way to change it yet.

Step 3: Changing the user preference

Now back in our other function, we need to add some stuff to our toggleDark functionchange that localStorage variable. Otherwise we will only ever have the default setting of false.

function toggleDark() {
    var element = document.getElementById("layoutBody")
    element.classList.toggle("dark-mode")
    let dark = JSON.parse(localStorage.getItem("jamesonDarkMode")) 
    if (dark) {
        localStorage.setItem("jamesonDarkMode", JSON.stringify(false))
        console.log("Dark mode off")
    }
    else {
        localStorage.setItem("jamesonDarkMode", JSON.stringify(true))
        console.log("Dark mode on")
    }
    //optional to change fontawesome icon on button
    var buttonElement = document.getElementById("darkIcon")
    buttonElement.classList.toggle("fa-moon")
    buttonElement.classList.toggle("fas")
    buttonElement.classList.toggle("far")
    buttonElement.classList.toggle("fa-sun")
}
Enter fullscreen mode Exit fullscreen mode

Now whenever the user clicks the button the localstorage variable will be updated, and saved across your site.

Top comments (5)

Collapse
 
ianwijma profile image
Ian Wijma

Hey, curious why you use jQuery for one piece of the code, where the rest of the code is just vanilla JS :D

$(window).on("load",loadDark());
Enter fullscreen mode Exit fullscreen mode

Could be replaced with:

window.addEventListener('load', () => loadDark());
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sbrevolution5 profile image
Seth A Burleson

Sorry for the late response on this, I've been grinding hard the past few weeks. I am learning jQuery and using it elsewhere in the project, not to mention I'm on bootstrap 4 so its already included. In the end its basically the same thing, a little more concise. I'm tending to like jQuery more and more, which you may see in a post later today ;)

Collapse
 
ianwijma profile image
Ian Wijma

LOVE seeing passion and hard work! I personally would suggest learning the native functions over jQuery.

jQuery was created to overcome major inconsistencies between browsers. Which is less the case now-a-days. I would recommend checking online sources like You-Dont-Need-jQuery (github) or (Now More Than Ever) You Might Not Need jQuery (csstricks). :)

But like all technologies, its up to you if you want to use it or not!

Note: Bootstrap 5 does not uses jQuery out of the box. Although it does support it. ref

Thread Thread
 
sbrevolution5 profile image
Seth A Burleson

To me, the jQuery stuff is so much easier. Just look at document.getElementById("myBigOldId").value vs $("#myBigOldId").value. But I totally see it becoming outdated, since it doesn't do anything "new".

Collapse
 
murphymurph21 profile image
John Murphy

Great article man. Good thinking making it persist across pages as well. I like the little moon and sun thing you did there at the end as well!!!noice!