通过CSS自定义滚动条样式可使其适配夜间模式，使用::-webkit-scrollbar系列伪元素设置暗色主题的轨道、滑块颜色，并结合prefers-color-scheme媒体查询实现自动切换，同时为Firefox提供scrollbar-width和scrollbar-color降级支持，确保跨浏览器一致性。
网页滚动条在夜间模式下的样式调整，主要是通过CSS来自定义滚动条的外观，使其更贴合暗色主题。现代浏览器（特别是基于Chromium的）支持对滚动条进行深度样式控制，下面介绍具体实现方法。
使用CSS自定义滚动条样式
通过::-webkit-scrollbar系列伪元素，可以针对不同部分设置颜色和行为，适用于Chrome、Edge、Safari等浏览器。
基本结构包括：
- ::-webkit-scrollbar：整体滚动条
- ::-webkit-scrollbar-thumb：可拖动的滑块部分
- ::-webkit-scrollbar-track：滚动条轨道背景
示例代码（夜间模式）：
立即学习“前端免费学习笔记（深入）”；
/* 滚动条整体 */
::-webkit-scrollbar {
width: 12px;
}
/ 滚动条轨道 /
::-webkit-scrollbar-track {
background: #1e1e1e;
border-radius: 6px;
}
/ 滚动条滑块 /
::-webkit-scrollbar-thumb {
background: #555;
border-radius: 6px;
border: 2px solid #1e1e1e;
}
/ 鼠标悬停时滑块 /
::-webkit-scrollbar-thumb:hover {
background: #777;
}
适配系统夜间模式
结合prefers-color-scheme媒体查询，可以让滚动条根据系统主题自动切换。
示例：
@media (prefers-color-scheme: dark) {
::-webkit-scrollbar-track {
background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background: #555;
}
::-webkit-scrollbar-thumb:hover {
background: #666;
}
}
@media (prefers-color-scheme: light) {
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #ccc;
}
}
兼容性与降级处理
Firefox不支持::-webkit-前缀，但可通过以下方式提升体验：
- 使用标准属性scrollbar-width和scrollbar-color（Firefox支持）
- 设置简洁的默认样式作为降级方案
Firefox专用样式：
* {
scrollbar-width: thin;
scrollbar-color: #555 #1e1e1e;
}
基本上就这些。只要合理使用CSS伪元素和媒体查询，就能让网页滚动条在夜间模式下看起来更协调，提升整体视觉体验。注意测试主流浏览器表现，确保可用性不受影响。
