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")
}

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")
    }
}

And the Jquery:

    <script>
        $(window).on("load",loadDark());
    </script>

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")
}

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