如何使用 Javascript 正确构建暗模式切换？

Question

我一直在尝试使用 JavaScript 让我的开关触发黑暗模式的开启和关闭，但显然我做错了什么。我试图通过将光 class 应用到我的 body 并使用 addClassListener 来触发它。下面是我的代码的简化版本，但我也计划在特定的 classes 上执行此操作，以便在每种不同模式下也更改字体和 div 颜色。有什么建议吗？

HTML

<label class="switch">
  <input type="checkbox" checked>
  <span id="slide" class="slider round"></span>
</label>

CSS

body{
          
          position: absolute;
          top: 320px;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: hsl(230, 17%, 14%);
          z-index: -1;
          
          
      }
    
    body.light {
          
          background-color: white;
          
          
      }

Javascript

const checkbox = document.getElementById('slide');
        
        checkbox.addEventListener('change', ()
                                 ==>{document.body.classList.toggle('light');
            
        });

Answer 1

您正试图通过 id 获取元素，但您尚未在代码段中定义任何 id。

<label class="switch">
  <input type="checkbox" checked>
  <span id="slider" class="slider round"></span>
</label>

此外，您正在侦听 span 元素上的 change 事件。 span 元素永远不会触发更改事件。如果您将其更改为在 input 元素中侦听，它应该触发。 Documentation

如何使用 Javascript 正确构建暗模式切换？

How do I properly structure a dark mode toggle using Javascript?

javascript

css

toggle

darkmode