I am trying to use localStorage to keep my theme consistent over page changes but I can't seem to get it to work.
This is what my html looks like:
<body onload="checkLightMode()">
<li><button class="mode-toggle"><i class="fas fa-sun fa-2x"></i></button></li>
And the JavaScript:
const button = document.querySelector
'.mode-toggle')
button.addEventListener('click', function () {
localStorage.setItem('light-mode', true)
if (localStorage.getItem('light-mode')) {
document.body.classList.toggle('light-mode')
document.querySelectorAll('.fa-sun').forEach(icon => icon.classList.toggle('fa-moon'))
} else {
document.body.classList.remove('light-mode')
localStorage.setItem('light-mode', false)
}
})
function checkLightMode() {
if (localStorage.getItem('light-mode')) {
body.classList.add('light-mode')
}
}
I was able to get it to work! Here is what did the trick. It ended up being quite simple, and I didn't need the onload function.
const buttons = document.querySelectorAll('.mode-toggle')
buttons.forEach(button => {
button.addEventListener('click', function () {
document.body.classList.toggle('light-mode')
document.querySelectorAll('.fa-sun').forEach(icon => icon.classList.toggle('fa-moon'))
if (document.body.classList.contains('light-mode')) {
localStorage.setItem('lightMode', 'enabled')
} else {
localStorage.setItem('lightMode', 'disabled')
}
})
})
if (localStorage.getItem('lightMode') === 'enabled') {
document.body.classList.add('light-mode')
document.querySelectorAll('.fa-sun').forEach(icon => icon.classList.add('fa-moon'))
}