color-scheme 不直接设置滚动条颜色，而是通过声明 light/dark 支持，触发 ua 用系统语义色自动重绘滚动条；需配合 和 :root { color-scheme } 才生效，单独使用无效。
color-scheme 本身不直接设置滚动条颜色，但触发 UA 自动渲染
color-scheme 不是 CSS 伪元素样式规则，它不生成 ::-webkit-scrollbar 这类声明。它的作用是向浏览器声明：“我支持 light/dark”，从而让 UA（用户代理）决定是否用系统语义色重绘原生 UI 元素——其中就包括滚动条的轨道、thumb 和 corner。
这意味着：你没写任何 ::-webkit-scrollbar，滚动条也会变色；你写了但没配 color-scheme + <meta>，它大概率卡在浅色外观不动。
-
color-scheme: light dark必须写在:root或html上，写在body或其他选择器里无效 - 滚动条颜色变化依赖系统语义色（如
Canvas、Scrollbar），不是你写的#ccc或rgba(0,0,0,0.1) - 若显式设置了
::-webkit-scrollbar-track { background: #fff }，就会覆盖 UA 自动渲染，导致深色模式下仍白底
为什么加了 color-scheme 滚动条还是白色？
最常见原因不是代码写错，而是信号链断裂——color-scheme 是“说明书”，但没配“开关”。
- 漏掉
<meta name="color-scheme" content="light dark">：该标签必须静态写在里，且位置越靠前越好（建议紧接<meta charset>后） - 写了
content="dark"或content="auto"：只接受light、dark或空格分隔组合，不能带引号、逗号或多余字符 - 浏览器不支持：iOS 13 以下、旧版 Android WebView（如 Chrome Custom Tabs v75 之前）完全忽略
color-scheme - 自定义样式干扰：比如
::-webkit-scrollbar-thumb { background: #000 }强制设死颜色，UA 就不再介入
如何安全地定制滚动条并保留系统适配能力？
目标不是“覆盖 UA”，而是“协同 UA”——用系统关键词替代固定值，再用媒体查询微调。
- 基础轨道/滑块背景优先用
background: Canvas、background: Scrollbar等系统色关键词，它们会随color-scheme自动切换 - 若需品牌色统一，把品牌色变量放在媒体查询里覆盖，例如：
@media (prefers-color-scheme: dark) { ::-webkit-scrollbar-thumb { background: var(--brand-color); } } - 避免给
::-webkit-scrollbar-track写死background-color，否则深色下可能对比度过低甚至不可见 - 测试时先清空所有自定义滚动条样式，确认原生表现是否已随系统切换，再逐步叠加修饰
滚动条颜色实际生效依赖三要素缺一不可
这不是单个 CSS 属性能搞定的事，而是一套协作信号：
-
<meta name="color-scheme" content="light dark">—— 浏览器解析 HTML 阶段的“准入许可” -
:root { color-scheme: light dark; }—— CSS 中的“能力声明” -
@media (prefers-color-scheme: dark)—— 你控制内容层的“样式响应”（虽不影响滚动条，但影响整体协调性）
漏掉任一环，滚动条就停留在默认浅色状态，且不会报错、不会警告——它只是安静地忽略你写的 color-scheme。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
