在浏览整个网站时保持选中复选框

Question

我使用复选框来切换使用 HTML、CSS 和 JS 的黑色和深色主题颜色。我的导航栏中有这段代码。它运作良好。但是一旦刷新或更改到网站内的其他页面，它就不再保持黑暗。

<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>

有人提出了使用本地存储的概念，我尝试了这个，但它不起作用。

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'));
});

请有人帮助我。

PS：我不是网络开发人员。我在这里和那里为我的博客使用 HTML 和 CSS。我正在使用 GitHub 页面来托管我的网站。 https://amatya-aditya.github.io/

Answer 1

JavaScript 代码的语法存在一些问题。检查下面的更新代码。

注意：document.getElementById() 不返回函数

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');
})