Javascript 黑暗模式工作！但当打开网页时，它不是默认模式

暗模式工作正常。但唯一的问题是，每当我打开网页，总是黑暗模式是在开始。我想先把它关掉，然后用开关打开。代码如下：

     let button = document.querySelector('.btn');
     let balls = document.querySelector('.btn-ball');

     button.addEventListener('click', ()=> {
       if (balls.classList.contains('ball')){    
         balls.classList.remove('ball');
         document.body.classList.remove('all');
       } else {
         balls.classList.add('ball');
         document.body.classList.add('all');
       }
     })

---

令人兴奋的是，我刚刚经历了类似的事情！在我的样式中，一组CSS变量默认为轻值。我使用媒体查询和

：not（）

选择器组合来应用黑色样式

/**默认灯光**/
：根{
--颜色表面：#fff；
}
/**覆盖黑暗**/
：root.dark{
--色面：#121212；
}
@介质（首选颜色方案：深色）{
：根：不是（.light）{
--色面：#121212；
}

我有一个单选组，其中输入值加倍为类名。这是一个非常简单的示例，可以重新考虑使用按钮、复选框或其他控件元素

constlightinput=document.getElementById（'light'）；
const darkInput=document.getElementById（'dark'）；
常量handleInput=（事件）=>{
document.documentElement.classList.remove（'light'、'dark'）；//重置
document.documentElement.classList.add（event.target.value）；
}
//处理输入事件
lightInput.addEventListener（'input'，handleInput）；
darkInput.addEventListener（“输入”，handleInput）；

主题
你能发布你的css和html以便我们了解你的JavaScript在做什么吗？哦，对不起。我只是重新发布了它们。谢谢你的时间。哇，谢谢你。说实话，因为我是新来的，这是另一个层次。我只学了基本的JS，今天我第一次做了黑暗模式和下拉菜单：）我会研究你说的话并找出答案。比非常感谢！！真的很高兴能帮上忙！这是一个有趣的话题，我正在学习的新东西玩得很开心：CSS变量，CSS媒体查询<代码>更喜欢颜色主题，。谢谢你提出的问题，happy hacking！嗨！今天我修好了！！^很高兴，但我自己尝试了，所以它与你教我的不同。我只是使用window.addEventListener（'load'，function（）{.before function.。当它启动时，我的背景成为默认设置！！
html is like this:

          <div class="btn">
            <div class="btn-ball"></div>
         </div>


     .btn {
        width: 40px;
        height: 70px;
        background: white;
        border: 1px solid black;
        border-radius: 22px;
        position: fixed;
        bottom: 10px;
        left:10px;
        cursor: pointer;
     }
     .btn:hover {
          box-shadow: 1px 1px 10px lightcoral;
     }
     .btn .btn-ball {
          width:30px;
          height: 30px;
          background-color: black;
          margin: 5px auto;
          border-radius: 50%;
          transition: transform .3s ease-out;
     }
     .btn .ball {
          transform: translateY(30px)
     }
     .all {
       background-color: black;
       color: white;
     }