使用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：两端按钮（可选）
示例代码：
<font color="#c7254e">::-webkit-scrollbar</font> { width: 10px; } <p><font color="#c7254e">::-webkit-scrollbar-track</font> { background: #f1f1f1; }</p><p><font color="#c7254e">::-webkit-scrollbar-thumb</font> { background-color: #ccc; border-radius: 5px; }</p>
结合CSS变量实现主题适配
将滚动条颜色设为CSS变量，方便在不同主题下动态切换。
立即学习“前端免费学习笔记（深入）”；
在:root中定义默认主题颜色：
:root { --scrollbar-bg: #f1f1f1; --scrollbar-thumb: #ccc; } <p>@media (prefers-color-scheme: dark) { :root { --scrollbar-bg: #333; --scrollbar-thumb: #666; } }</p><p>::-webkit-scrollbar-track { background: var(--scrollbar-bg); }</p><p>::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); }</p>
这样页面会根据系统暗色模式自动调整滚动条颜色。
配合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; }
为了兼顾更多浏览器，建议同时写两套规则。
基本上就这些，不复杂但容易忽略细节。合理使用变量和媒体查询，就能实现滚动条随主题自然变色的效果。