如何用 Dark Reader 把任意网页变成深色模式:从零到顺手的一份指南
【免费下载链接】darkreaderDark Reader Chrome and Firefox extension项目地址: https://gitcode.com/gh_mirrors/da/darkreader
凌晨一点改完最后一版方案,想刷几页资料再睡,却发现纯白的网页刺得眼睛发酸。Dark Reader 就是为这种时刻准备的:它是一个开源浏览器扩展,会实时分析页面的样式表并重算颜色,把任意网页转成深色模式。项目已迭代到 4.9 版本,覆盖 Chrome、Firefox、Edge、Safari、Thunderbird 五个平台。
先说清楚:它是怎么把网页"变黑"的
很多夜间模式只是把颜色简单取反,结果链接变成荧光绿、照片变成马赛克。Dark Reader 的做法更细:逐条解析页面里的 CSS,把背景色、文字色、边框色按一套深色配色重新计算;遇到本身已经是暗色的网站,它会自动跳过,避免"暗上加暗"。换句话说,它不改网站本身,只是在你浏览器里给每个页面临时换上一套新配色。
界面支持 42 种语言,中文用户看到的设置项直接就是中文,不需要对照英文猜。
两分钟拿到第一个深色网页
从安装到看到效果,两分钟足够:
- 打开浏览器扩展商店,搜索 Dark Reader 并安装,Chrome、Edge、Firefox 都有官方版。
- 装完即生效,当前页面会立刻变深——它默认对所有网站开启,这就是你能看到的第一眼变化。
- 点一下工具栏图标,弹出面板里有当前网站的开关和四个滑块:亮度、对比度、灰度、羊皮纸色。
- 把亮度从默认值 100 拖到 80 左右,页面的白底会明显收敛,刺眼感立刻减轻。
默认背景是接近纯黑的 #181a1b,如果觉得压得太狠,先把亮度抬一点再慢慢调。
想自己构建源码的人(普通用户可跳过)
git clone https://gitcode.com/gh_mirrors/da/darkreader cd darkreader && npm install && npm run build构建产物会在build/release/下生成扩展包,以非加载方式装入浏览器即可。
三个真实时刻,各有一个合适的调法
时刻一:白天写在线文档,白底最晃眼。你会发现访问 Google 文档、SharePoint 这类办公网站时,扩展已经按内置的默认配置自动切到了"过滤"模式——它只做整体色调偏移,不逐条重绘,所以长文档不会被改花。
- 打开文档页,点扩展图标,确认引擎显示为"过滤"。
- 亮度拧到 85 左右,对比度保持 100。
- 如果文字发灰看不清,把灰度归零。
为什么文档用过滤:它不会动页面布局,只统一压暗整体色温,长文档读起来最稳。
时刻二:晚上想自动变暗,早上自动恢复。不用手动来回切换。Dark Reader 内置定时开关,默认时间窗是 18:00 到次日 9:00——在设置里打开"自动化",下班后页面自动转暗,第二天早上自动恢复正常。如果你更希望跟随系统深浅色切换,也有对应选项,二选一即可。
时刻三:某个网站变黑后花屏、按钮看不清。这是少数网站会遇到的情况,处理方式是给这一个网站单独存一套参数:
- 在弹出面板里点进当前网站的设置。
- 换一种引擎试试:动态不行就换过滤,反之亦然。
- 把调好的参数存为该网站的专属配置,下次打开自动生效。
- 实在调不好,就把它加入例外列表,让页面保持原样。
四种渲染引擎速查
| 引擎 | 适合谁 | 计算开销 | 色彩还原 |
|---|---|---|---|
| 动态(默认) | 日常绝大多数网站 | 中 | 最高,逐条重算页面颜色 |
| 过滤 | 在线文档、表格类页面 | 低 | 整体色调偏移,快而稳 |
| 增强过滤 | 兼容性问题多的老页面 | 中低 | 介于过滤与动态之间 |
| 静态 | 愿意自己写 CSS 的人 | 低 | 完全由你定义的配色决定 |
懒人默认建议:全程用动态,个别网站再单独存。
愿意细调的人还能做什么
- 预设方案:把几组亮度、对比度组合存成预设,一键切换,不用每次回头拖滑块。
- 网站修复:项目
src/config/目录内置了社区维护的网站修复清单,随版本一起更新,新网站的问题会被陆续修掉。 - 自动化:定时开关和跟随系统深浅色都支持,夜间场景不用操心。
- 自定义参数:想给某个域名固定一组参数,效果大致长这样(示例值):
{ "example.com": { "brightness": 80, "contrast": 90 } }改错了也不怕,面板里的重置按钮可以一键还原所有参数。
哪些地方它管不了
它只处理网页内容本身,不改浏览器自己的界面,也不碰系统级深色。少数受安全策略保护的页面(比如部分银行网站)默认无法强制变暗,官方文档有说明,但除非你清楚自己在做什么,不建议动那些设置。PDF 是否变暗由单独的开关控制。了解这些边界,遇到"为什么这里没变"时你就不会误会。
接下来做三件事
- 装上
- 把亮度和对比度试出自己舒服的两档
- 给最常用的一个网站单独存一套参数
项目持续接受社区贡献:上报某个网站的显示问题、补一段翻译、或提交一条修复规则,都是实实在在的参与方式。
【免费下载链接】darkreaderDark Reader Chrome and Firefox extension项目地址: https://gitcode.com/gh_mirrors/da/darkreader
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考