news 2026/8/22 21:04:54

如何用 Dark Reader 把任意网页变成深色模式:从零到顺手的一份指南

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
如何用 Dark Reader 把任意网页变成深色模式:从零到顺手的一份指南

如何用 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 种语言,中文用户看到的设置项直接就是中文,不需要对照英文猜。

两分钟拿到第一个深色网页

从安装到看到效果,两分钟足够:

  1. 打开浏览器扩展商店,搜索 Dark Reader 并安装,Chrome、Edge、Firefox 都有官方版。
  2. 装完即生效,当前页面会立刻变深——它默认对所有网站开启,这就是你能看到的第一眼变化。
  3. 点一下工具栏图标,弹出面板里有当前网站的开关和四个滑块:亮度、对比度、灰度、羊皮纸色。
  4. 把亮度从默认值 100 拖到 80 左右,页面的白底会明显收敛,刺眼感立刻减轻。

默认背景是接近纯黑的 #181a1b,如果觉得压得太狠,先把亮度抬一点再慢慢调。

想自己构建源码的人(普通用户可跳过)

git clone https://gitcode.com/gh_mirrors/da/darkreader cd darkreader && npm install && npm run build

构建产物会在build/release/下生成扩展包,以非加载方式装入浏览器即可。

三个真实时刻,各有一个合适的调法

时刻一:白天写在线文档,白底最晃眼。你会发现访问 Google 文档、SharePoint 这类办公网站时,扩展已经按内置的默认配置自动切到了"过滤"模式——它只做整体色调偏移,不逐条重绘,所以长文档不会被改花。

  1. 打开文档页,点扩展图标,确认引擎显示为"过滤"。
  2. 亮度拧到 85 左右,对比度保持 100。
  3. 如果文字发灰看不清,把灰度归零。

为什么文档用过滤:它不会动页面布局,只统一压暗整体色温,长文档读起来最稳。

时刻二:晚上想自动变暗,早上自动恢复。不用手动来回切换。Dark Reader 内置定时开关,默认时间窗是 18:00 到次日 9:00——在设置里打开"自动化",下班后页面自动转暗,第二天早上自动恢复正常。如果你更希望跟随系统深浅色切换,也有对应选项,二选一即可。

时刻三:某个网站变黑后花屏、按钮看不清。这是少数网站会遇到的情况,处理方式是给这一个网站单独存一套参数:

  1. 在弹出面板里点进当前网站的设置。
  2. 换一种引擎试试:动态不行就换过滤,反之亦然。
  3. 把调好的参数存为该网站的专属配置,下次打开自动生效。
  4. 实在调不好,就把它加入例外列表,让页面保持原样。

四种渲染引擎速查

引擎适合谁计算开销色彩还原
动态(默认)日常绝大多数网站最高,逐条重算页面颜色
过滤在线文档、表格类页面整体色调偏移,快而稳
增强过滤兼容性问题多的老页面中低介于过滤与动态之间
静态愿意自己写 CSS 的人完全由你定义的配色决定

懒人默认建议:全程用动态,个别网站再单独存。

愿意细调的人还能做什么

  • 预设方案:把几组亮度、对比度组合存成预设,一键切换,不用每次回头拖滑块。
  • 网站修复:项目src/config/目录内置了社区维护的网站修复清单,随版本一起更新,新网站的问题会被陆续修掉。
  • 自动化:定时开关和跟随系统深浅色都支持,夜间场景不用操心。
  • 自定义参数:想给某个域名固定一组参数,效果大致长这样(示例值):
{ "example.com": { "brightness": 80, "contrast": 90 } }

改错了也不怕,面板里的重置按钮可以一键还原所有参数。

哪些地方它管不了

它只处理网页内容本身,不改浏览器自己的界面,也不碰系统级深色。少数受安全策略保护的页面(比如部分银行网站)默认无法强制变暗,官方文档有说明,但除非你清楚自己在做什么,不建议动那些设置。PDF 是否变暗由单独的开关控制。了解这些边界,遇到"为什么这里没变"时你就不会误会。

接下来做三件事

  1. 装上
  2. 把亮度和对比度试出自己舒服的两档
  3. 给最常用的一个网站单独存一套参数

项目持续接受社区贡献:上报某个网站的显示问题、补一段翻译、或提交一条修复规则,都是实实在在的参与方式。

【免费下载链接】darkreaderDark Reader Chrome and Firefox extension项目地址: https://gitcode.com/gh_mirrors/da/darkreader

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/22 21:01:20

Vue校园兼职招聘系统开发与优化实践

1. 项目概述:基于Vue的校园兼职招聘系统校园兼职招聘系统是连接学生与企业的重要桥梁,这个基于Vue.js的前端项目配合Node.js后端和MySQL数据库,实现了从岗位发布、简历投递到面试管理的全流程数字化。作为毕业设计选题,它不仅涵盖…

作者头像 李华
网站建设 2026/8/22 21:01:18

华为OD机试红黑图算法解析与Java/Go实现

1. 项目概述:华为OD机试与红黑图算法挑战华为OD(Outstanding Developer)机试是华为面向全球开发者推出的技术能力测评体系,其C卷作为中高级难度题库,常包含数据结构与算法的综合应用题型。"红黑图"作为2026年…

作者头像 李华
网站建设 2026/8/22 21:00:37

SpringBoot2+Vue3构建高校招生系统技术解析

1. 项目概述:招生宣传管理系统的技术栈选型招生宣传管理系统作为高校信息化建设的重要一环,需要同时满足后台数据管理的高效性和前端用户交互的流畅性。这套基于SpringBoot2Vue3MyBatis-PlusMySQL8.0的技术方案,正是针对这类业务场景的典型解…

作者头像 李华
网站建设 2026/8/22 21:00:25

数学建模解题操作系统:从语义图谱到可信验证

1. 这不是“答案速递”,而是一套可复用的建模解题操作系统“2023年亚太杯数学建模ABC题思路及参考代码”——看到这个标题,很多同学第一反应是赶紧下载、复制、粘贴、交卷。但我在带了七届校队、指导过43支参赛队伍、亲手批阅过217份初稿后,越…

作者头像 李华
网站建设 2026/8/22 20:56:07

ol-plot:25 种地图标绘符号一站搞定,OpenLayers 矢量绘制不再手搓

ol-plot:25 种地图标绘符号一站搞定,OpenLayers 矢量绘制不再手搓 【免费下载链接】ol-plot :art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘 项目地址: https://gitcode.com/gh_mirrors/ol/ol-plot 痛点切入 在 OpenLayers 上做地图应用的人都熟…

作者头像 李华