如何将滚动条切换到暗模式？

Question

 const dark = document.getElementById("dark"); dark.addEventListener("click", function() { const body = document.body; body.classList.toggle("ddark") })

 html { height: 1000px; } body { background-color: rgb(220,220,220); }::-webkit-scrollbar{ border-left: 1px solid black; }::-webkit-scrollbar-track { background-color: white; }::-webkit-scrollbar-thumb { border: 3px solid white; background-color: darkgray; border-radius: 20px; }.ddark { background-color: #303030; }

 <button class="darkmode" id="dark">Go Dark</button>

单击按钮时，我想将滚动条背景颜色切换为深色模式。 当正文变暗时，页面的右侧看起来很丑。 这个怎么做？

Answer 1

我刚刚添加了 html 而不是 body，我还添加了 html 和默认的滚动条样式，它工作正常。

 const dark = document.getElementById("dark"); dark.addEventListener("click", function () { const body = document.querySelector("html"); body.classList.toggle("ddark") })

 html { height: 1000px; background-color: rgb(220, 220, 220); } html::-webkit-scrollbar { border-left: 1px solid black; } html::-webkit-scrollbar-track { background-color: white; } html::-webkit-scrollbar-thumb { border: 3px solid white; background-color: darkgray; border-radius: 20px; }.ddark { background-color: #303030; } html.ddark::-webkit-scrollbar-track { background-color: #ffffff; } html.ddark::-webkit-scrollbar-thumb { background-color: black; }

 <button class="darkmode" id="dark">Go Dark</button>