This content originally appeared on DEV Community and was authored by Seth A Burleson
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.
This content originally appeared on DEV Community and was authored by Seth A Burleson
Seth A Burleson | Sciencx (2021-06-03T20:47:37+00:00) Creating a toggleable dark mode theme. Retrieved from https://www.scien.cx/2021/06/03/creating-a-toggleable-dark-mode-theme/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.