I am using the checkbox to toggle the black and dark theme color using HTML, CSS, and JS. I have this code inside my navbar. It is working well. But once refreshed or changed to other pages inside the website, it no longer stays dark.
<div>
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<div class="ball"></div>
</label>
</div>
Someone suggested the concept of using local storage and I tried this, but it's not working.
const chk = document.getElementById('chk');
chk.addEventListener('change', () => {
document.body.classList.toggle('dark');
});
// for checkbox remained checked
document.getElementById('chk')(function(){
var test = localStorage.input === 'true'? true: false;
document.getElementById('chk')('input').prop('checked', test || false);
});
document.getElementById('chk')('input').on('change', function() {
localStorage.input = document.getElementById('chk')(this).is(':checked');
console.log(document.getElementById('chk')(this).is(':checked'));
});
Please somebody help me.
PS: I'm not a web developer. I use HTML and CSS from here and there for my blog. I'm using GitHub pages to host my website. https://amatya-aditya.github.io/
There were some issues with the syntax of the JavaScript code. Check below for the updated code.
note: document.getElementById() does not return a function
const chk = document.getElementById('chk');
chk.addEventListener('change', (e) => {
localStorage.setItem('dark-mode', e.target.checked);
if ( e.target.checked )
document.body.classList.add('dark');
else
document.body.classList.remove('dark');
});
window.addEventListener('load', () => {
let value = localStorage.getItem('dark-mode');
document.getElementById('chk').checked = value === 'true' ? true : false;
if ( value === 'true' )
document.body.classList.add('dark');
else
document.body.classList.remove('dark');
})