滚动条在深色模式下不会自动变暗，必须手动用@media (prefers-color-scheme: dark)重写整套::-webkit-scrollbar规则，且ios safari完全无视这些样式；firefox仅支持scrollbar-color，不支持圆角或渐变。
滚动条在深色模式下不会自动变暗，必须手动用 @media (prefers-color-scheme: dark) 重写整套 ::-webkit-scrollbar 规则，且 iOS Safari 完全无视这些样式——这不是你写错了，是它压根不支持。
为什么 prefers-color-scheme 写了却没反应
常见错误不是媒体查询语法错，而是环境卡住：系统根本没开深色模式；file:// 协议下 Safari 直接禁用该查询；CSS 文件加载失败或被更高优先级规则覆盖（DevTools 里看 Styles 面板是否 disabled）；更隐蔽的是——只写了深色规则，但没配默认浅色样式，导致文字糊在黑背景上（color 改了，background-color 没动）。
验证是否生效，直接在控制台跑：window.matchMedia('(prefers-color-scheme: dark)').matches，返回 true 才说明系统和浏览器都认这个信号。
::-webkit-scrollbar 在深色模式下必须整套重写
WebKit 滚动条伪类不响应 prefers-color-scheme 的变量继承，var(--scroll-thumb) 这类写法在 ::-webkit-scrollbar-thumb 里无效。只能靠媒体查询硬切两套规则：
/* 浅色模式默认 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 5px; }
<p>@media (prefers-color-scheme: dark) {
::-webkit-scrollbar-track { background: #2d2d2d; }
::-webkit-scrollbar-thumb { background: #6a6a6a; border-radius: 5px; }
}</p>
-
::-webkit-scrollbar宽度建议统一设（如10px），避免深/浅模式切换时布局抖动 -
border-radius别超过 thumb 高度一半（比如 thumb 高 8px，radius ≤ 4px），否则 Safari 会忽略 - 不要只改
thumb颜色而漏掉track，否则深色下轨道发灰、对比度低，滑块难识别
Firefox 和 iOS Safari 怎么办
Firefox 只认 scrollbar-color，且只接受两个值或一对颜色：scrollbar-color: #6a6a6a #2d2d2d;。它不支持圆角、hover 效果，也不保证精确渲染——实际效果取决于系统主题透出的底层风格。
iOS Safari 完全忽略所有 ::-webkit-scrollbar 样式，这是 Apple 的设计决定，不是 bug。它默认隐藏滚动条，滑动时短暂浮现原生样式，无法定制。
- 若强求视觉一致，得用 JS 库（如
simplebar），但它会接管 DOM 滚动逻辑，可能影响position: sticky或第三方组件行为 - 更务实的做法是：Android Chrome / Edge 用
::-webkit-scrollbar，Firefox 用scrollbar-color，iOS 就让它保持原生——加个 subtle 渐变阴影提示“此处可滚动”比硬塞一个假滚动条更可靠 - 所有滚动条相关 CSS 必须挂载在
:root或html下，别写在.container之类局部作用域里，否则不生效
真正容易被忽略的点是：深色模式下，<select></select>、<input type="range">、原生滚动条这些控件的颜色不会跟着 prefers-color-scheme 自动翻转，必须显式用 color-scheme: light dark 声明容器支持，并配合媒体查询单独调色——否则用户切到深色，下拉箭头还是刺眼的亮蓝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
