滚动条在暗黑模式下不生效的根本原因是 scrollbar-color 和 ::-webkit-scrollbar 未随主题动态切换；firefox 仅支持 scrollbar-color，chromium 内核浏览器仅响应 ::-webkit-scrollbar，二者均不支持 css 变量绑定，必须通过 html[data-theme="dark"] 等选择器显式重写样式，并注意 scrollbar-color 的 thumb track 顺序及伪元素在 textarea、modal、shadow dom 等场景的遗漏处理。
滚动条样式为什么在暗黑模式下不生效
常见现象是页面主体变暗了，但滚动条还是亮色——根本原因不是 CSS 没写，而是 scrollbar-color 和 ::-webkit-scrollbar 两类规则没随主题动态切换。Firefox 只认 scrollbar-color，Chrome/Safari/Edge（Chromium）只响应 ::-webkit-scrollbar 伪元素；两者都不支持 CSS 变量直接绑定，必须靠 html[data-theme="dark"] 这类选择器显式重写。
必须把滚动条样式写在 html[data-theme] 下
不能只写全局的 ::-webkit-scrollbar，否则暗黑模式切换时滚动条不会变色。所有滚动条规则必须挂载到主题选择器下，确保仅在对应模式激活：
-
html[data-theme="light"] ::-webkit-scrollbar-thumb设为浅灰（如#c0c0c0） -
html[data-theme="dark"] ::-webkit-scrollbar-thumb设为深灰（如#555） -
html[data-theme="light"]下设scrollbar-color: #c0c0c0 #f0f0f0 -
html[data-theme="dark"]下设scrollbar-color: #555 #222
注意：scrollbar-color 的两个值顺序是 thumb track，写反会导致 Firefox 显示异常。
Firefox 滚动条颜色无法继承 CSS 变量
scrollbar-color 不接受 var(--thumb)，硬编码是唯一可靠方式。如果你用 CSS 变量管理主题色，得在 html[data-theme="dark"] 块里手动重复赋值：
html[data-theme="dark"] {
scrollbar-color: #555 #222;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background-color: #555;
}
别试图用 JS 动态改 document.documentElement.style.scrollbarColor——该属性只读，浏览器会忽略。
滚动条伪元素在暗黑模式下容易漏掉的区域
除了主内容区，以下地方的滚动条也需单独处理，否则仍显示亮色：
-
<textarea></textarea>和<pre class="brush:php;toolbar:false;"></pre>内部滚动条：它们默认继承父级，但某些 UA 样式会覆盖，建议加html[data-theme="dark"] textarea::-webkit-scrollbar显式声明 - 自定义弹窗或抽屉组件（
position: fixed）内的滚动容器：需额外加.modal-content[data-theme="dark"] ::-webkit-scrollbar类似规则 - 第三方富文本编辑器（如 TinyMCE、Quill）的编辑区：它们常建在 shadow DOM 或 iframe 里，
html[data-theme]无法穿透，得查其文档找主题 API 或注入 style 标签
最易被忽略的是 ::-webkit-scrollbar-corner——当同时出现水平和垂直滚动条时，右下角那个小方块，默认是白色，暗黑模式下要设成 background: #121212 才统一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
