如何实现点击按钮同步切换滚动条至深色模式？

直接修改CSS，利用body的.ddark类关联滚动条伪元素样式，实现滚动条与页面深色模式同步切换。具体做法是给滚动条各伪元素选择器添加.ddark前缀，指定深色模式下的样式。

修改后的完整代码 #

HTML #

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

JavaScript #

const dark = document.getElementById("dark");

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

CSS #

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;
}
/* 深色模式body样式 */
.ddark {
  background-color: #303030;
}
/* 深色模式滚动条样式 */
.ddark ::-webkit-scrollbar{
  border-left: 1px solid #555;
} 
.ddark ::-webkit-scrollbar-track {
  background-color: #404040;
}
.ddark ::-webkit-scrollbar-thumb {
  border: 3px solid #404040;
  background-color: #666;
  border-radius: 20px;
}

说明 #

• 核心逻辑是通过.ddark父选择器限定滚动条伪元素样式，当body添加该类时，滚动条自动应用深色模式样式。
• 可根据需求调整深色模式下滚动条的颜色、边框等属性，保证与整体深色风格匹配。

内容的提问来源于stack exchange，提问作者NickNameNeeded