I am a working on a portfolio website that has a light/darkmode theme switch. The switch works, but it does not save the input. So when the user refreshes or clicks on a navigation link, the website goes back to the default lightmode. I want it to remember the state. I know that I have to use localStorage to make it work, but I can not seem to figure out how to do it.
Website: www.hermanvulkers.com
JavaScript theme switch code:
button.addEventListener("click", function () {
if (document.body.classList.contains("light-theme")) {
// Turn light mode off -> dark mode on
document.body.classList.toggle("light-theme");
document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;
} else {
// Turn dark mode off -> light mode on
document.body.classList.toggle("light-theme");
document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme"></img>`;
}
});
HTML button code:
<button class="themeswitcher" id="themeswitcher">
<span>Dark</span>
<img src="images/moon.png" alt="Choose website theme">
</button>
Is anyone able to help? Thanks in advance!
Your code is unnecessarily complex.
Here is a full version
window.addEventListener("load",function() {
const theme = localStorage.getItem("theme");
if (theme) document.body.classList.toggle("light-theme",theme==="light")
document.getElementById("themeswitcher").addEventListener("click", function () {
const light = document.body.classList.contains("light-theme")
this.innerHTML = `<span>${light? 'Dark' : 'light'}</span><img src="images/${light? 'moon' : 'sunrise'}.png" alt="Choose website theme">`;
document.body.classList.toggle("light-theme");
localStorage.setItem("theme",light?"dark":"light");
});
});
You can add it like this:
button.addEventListener("click", function () {
if (document.body.classList.contains("light-theme")) {
// Turn light mode off -> dark mode on
window.localStorage.setItem('darkmodeTurnedOn', 'true');
document.body.classList.toggle("light-theme");
document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;
} else {
// Turn dark mode off -> light mode on
document.body.classList.toggle("light-theme");
window.localStorage.setItem('darkmodeTurnedOn', 'false');
document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme"></img>`;
}
});
Also, on initial loading of your site, you should have listener to switch this on or off, like this:
<body onload="setTheme">
And in the setTheme function you can do the following:
function setTheme(){
if (window.localStorage.getItem('darkmodeTurnedOn') === 'true'){
document.body.classList.remove("light-theme");
}
}
You can simply set an item into the localStorage with:
localStorage.setItem('key', value);
and then access it with
let value = localStorage.getItem('key');
So I think this should work:
button.addEventListener("click", function () {
if (document.body.classList.contains("light-theme")) {
// Turn light mode off -> dark mode on
document.body.classList.toggle("light-theme");
document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;
window.localStorage.setItem('darkMode', 'true');
} else {
// Turn dark mode off -> light mode on
document.body.classList.toggle("light-theme");
document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme"></img>`;
window.localStorage.setItem('darkMode', 'false');
}
});
And somewhere in the beginning of your code:
let wasDarkMode = window.localStorage.getItem('darkMode');
if (wasDarkMode) {
document.body.classList.toggle("light-theme");
document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;
} else {
document.body.classList.toggle("light-theme");
document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme"></img>`;
}