To keep the checkbox checked once checked while browsing entire website

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/