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.
Top comments (5)
Hey, curious why you use jQuery for one piece of the code, where the rest of the code is just vanilla JS :D
Could be replaced with:
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 ;)
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
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".
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!