使用CSS变量和媒体查询可实现滚动条颜色随主题自动变化。通过::-webkit-scrollbar定义滚动条各部分样式，结合:root定义变量，利用@media (prefers-color-scheme: dark)适配暗色模式，并用JavaScript动态切换主题，同时为兼容Firefox需添加scrollbar-width和scrollbar-color规则，确保多浏览器支持。
想要让滚动条颜色跟随页面主题自动变化，可以通过CSS自定义滚动条样式，并结合CSS变量或媒体查询实现主题适配。这种方法在现代浏览器（尤其是基于Chromium的浏览器）中支持良好。
使用CSS自定义滚动条样式
通过::-webkit-scrollbar系列伪元素，可以控制滚动条的外观。基本结构包括轨道、滑块、按钮等部分：
- ::-webkit-scrollbar：整个滚动条
- ::-webkit-scrollbar-track：滚动条轨道
- ::-webkit-scrollbar-thumb：滚动条滑块
- ::-webkit-scrollbar-button：两端按钮（可选）
示例代码：
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 5px;
}
结合CSS变量实现主题适配
将滚动条颜色设为CSS变量，方便在不同主题下动态切换。
立即学习“前端免费学习笔记（深入）”；
在:root中定义默认主题颜色：
:root {
--scrollbar-bg: #f1f1f1;
--scrollbar-thumb: #ccc;
}
@media (prefers-color-scheme: dark) {
:root {
--scrollbar-bg: #333;
--scrollbar-thumb: #666;
}
}
::-webkit-scrollbar-track {
background: var(--scrollbar-bg);
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
}
这样页面会根据系统暗色模式自动调整滚动条颜色。
配合JavaScript切换主题
如果使用手动主题切换（如“亮色/暗色”按钮），可通过JavaScript动态修改CSS变量：
function setTheme(isDark) {
if (isDark) {
document.documentElement.style.setProperty('--scrollbar-bg', '#333');
document.documentElement.style.setProperty('--scrollbar-thumb', '#666');
} else {
document.documentElement.style.setProperty('--scrollbar-bg', '#f1f1f1');
document.documentElement.style.setProperty('--scrollbar-thumb', '#ccc');
}
}
调用setTheme(true)即可切换为暗色滚动条。
兼容性说明
CSS滚动条样式目前主要被Chrome、Edge、Firefox（部分支持）、Safari（较新版本）支持。Firefox使用scrollbar-width和scrollbar-color属性，写法不同：
* {
scrollbar-width: thin;
scrollbar-color: #ccc #f1f1f1;
}
为了兼顾更多浏览器，建议同时写两套规则。
基本上就这些，不复杂但容易忽略细节。合理使用变量和媒体查询，就能实现滚动条随主题自然变色的效果。
