可通过四种方法启用Chrome暗色滚动条:一、启用Chrome Canary的Web Platform Controls dark mode实验标志;二、开启系统深色模式并重启Chrome;三、用CSS自定义滚动条样式并通过Stylus注入;四、安装Dark Reader扩展并开启滚动条着色功能。

如果您在使用Chrome浏览器时希望滚动条与深色界面协调一致,避免浅色滚动条破坏视觉沉浸感,则需通过特定设置或实验性功能启用暗色滚动条。以下是实现该效果的多种方法:
一、启用Web Platform Controls dark mode实验标志
该方法直接激活Chrome对原生控件(包括滚动条、按钮、下拉框等)的深色适配能力,使滚动条颜色自动跟随系统或网页深色主题变化,无需额外CSS干预。
1、下载并安装Chrome Canary浏览器(稳定版Chrome暂不支持此标志)。
2、启动Chrome Canary,在地址栏输入chrome://flags/并回车。
3、在页面顶部搜索框中输入Web Platform Controls dark mode。
4、在搜索结果中找到该选项,点击右侧下拉菜单,选择Enabled。
5、点击页面底部出现的Relaunch按钮重启浏览器。
二、通过操作系统深色模式联动触发
Chrome会检测系统级深色外观设置,并据此调整部分UI控件的渲染逻辑,滚动条在支持该机制的版本中可随之变为暗色,尤其在Windows 10/11及macOS上表现稳定。
1、在Windows系统中,打开“设置” → “个性化” → “颜色”,将“选择您的模式”设为深色。
2、在macOS中,进入“系统设置” → “外观”,选择深色。
3、确保Chrome浏览器已完全关闭后重新启动。
4、访问任意网页,观察垂直滚动条轨道与滑块是否呈现灰黑系配色。
三、使用CSS自定义滚动条样式(网页级生效)
此方法适用于开发者或需对特定网站强制应用暗色滚动条的用户,通过注入CSS规则直接重绘滚动条各部件,完全可控且兼容所有Chromium内核浏览器。
1、新建一个文本文件,粘贴以下CSS代码:
/* 滚动条整体宽度 */
::-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; }
2、将文件保存为dark-scrollbar.css,并确保其路径可被网页访问。
3、通过Stylus扩展注入该CSS:安装Stylus后,点击工具栏图标 → “编写新样式” → 粘贴上述代码 → 设置适用网址(如https?://*)→ 点击保存。
4、刷新任意网页,滚动条即按指定暗色方案渲染。
四、安装Dark Reader扩展并启用滚动条着色
Dark Reader不仅反转网页内容,还提供滚动条颜色同步选项,可在滤镜启用时自动将滚动条渲染为匹配的深色,避免视觉割裂。
1、访问Chrome网上应用店,搜索并安装Dark Reader扩展。
2、点击地址栏右侧扩展图标,开启主开关。
3、点击齿轮图标进入设置 → 切换至“Filter+”模式。
4、向下滚动至“Scrollbars”选项组,勾选“Enable scrollbars tinting”。
5、点击“Save changes”,刷新当前网页即可生效。










