color-scheme不直接设置滚动条颜色，而是声明light/dark支持以触发ua用系统语义色自动重绘；需同时满足三要素：置于head靠前位置、:root { color-scheme: light dark }、且不写死::-webkit-scrollbar样式，缺一不可。
color-scheme 本身不定制滚动条样式，它只是告诉浏览器“我支持 light/dark”，让 UA（比如 Chrome、Safari）自动用系统语义色重绘原生滚动条——所以你没写任何 ::-webkit-scrollbar，滚动条也会变色；但如果你写了死值，color-scheme 就被绕过了。
为什么加了 color-scheme 滚动条还是白色？
最常见原因是信号链断裂，不是代码写错，而是缺了关键配合项：
-
<meta name="color-scheme" content="light dark">必须静态写在里，且位置越靠前越好（建议紧接<meta charset>后） -
content值只能是light、dark或空格分隔的组合，不能带引号、逗号或auto -
color-scheme: light dark必须写在:root或html上，写在body或其他选择器里完全无效 - 如果用了
::-webkit-scrollbar-track { background: #fff }这类写死颜色，UA 就不再介入，深色下轨道仍白
color-scheme 和 prefers-color-scheme 怎么协同用？
二者定位不同：color-scheme 是声明支持能力，prefers-color-scheme 是检测用户偏好。实际项目中要一起用才稳：
- 先用
:root { color-scheme: light dark }+<meta>打开 UA 自动渲染开关 - 再用
@media (prefers-color-scheme: dark)微调自定义部分，比如只在深色模式下给::-webkit-scrollbar-thumb加个品牌色边框 - 避免在媒体查询里重写整套
::-webkit-scrollbar，否则容易覆盖 UA 的语义色逻辑 - 测试时先清空所有自定义样式，确认原生滚动条已随系统切换，再逐步叠加修饰
怎么安全地用 CSS 变量配合 color-scheme？
目标不是覆盖 UA，而是让它“有据可依”——用系统关键词替代固定值：
- 轨道背景优先用
background: Canvas、background: Scrollbar，这些会随color-scheme自动切换 - 如需品牌色，把变量放在媒体查询里，例如：
@media (prefers-color-scheme: dark) { ::-webkit-scrollbar-thumb { background: var(--brand-accent); } } -
scrollbar-color不支持直接写var(--thumb) var(--track)—— Firefox 对变量解析极脆弱，若变量未继承、值为transparent或带单位，整条声明会被忽略 - 变量定义必须在
:root，且避免用scrollbar-开头（某些浏览器会误解析为原生属性）
真正生效依赖三要素：正确的 <meta>、正确的 :root { color-scheme }、不干扰的自定义样式。少一个，滚动条就卡在浅色不动——这不是 bug，是信号没传到位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
