5 分钟装好 Dark Reader，把任意网站转成暗色主题

5 分钟装好 Dark Reader，把任意网站转成暗色主题

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

深夜盯屏时，网页的白色背景格外刺眼，读上二十分钟眼睛就开始发酸。装上 Dark Reader 后，页面会自动变成深灰底、浅色字。它是一款开源的暗色模式浏览器扩展，核心功能是把任意网站即时转换成暗色主题。

🚀 快速上手：源码构建并加载的三步路径

普通用户的最短路径，是在浏览器商店（Chrome 网上应用店、Firefox 附加组件市场或 Edge 加载项商店）搜索 Dark Reader 并点击安装，半分钟完成。如果你是开发者，或想跑最新源码，本地构建也只需三步：

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

构建完成后，各浏览器的扩展包会输出到build/release/目录。打开浏览器的扩展管理页，开启“开发者模式”，把build/release/chrome（或firefox）文件夹作为“加载已解压的扩展程序”导入。打开任意网页即可，暗色模式默认开启，无需额外设置。

⚙️ 核心能力：动态主题、暗色检测与按站排除

动态主题（默认引擎）。它做的事情是实时收集页面的 CSS 规则，逐条匹配选择器，生成对应的暗色样式。无需任何操作，默认即启用；DOM 节点多、配色复杂的页面，文字与按钮依然可辨，图片基本保持原样。它是使用频率最高的模式，也是后面所有定制能力的基础。

站点自带暗色检测。在应用主题前，它会先判断站点是否已有暗色主题，有就自动跳过。这个检测默认开启（detectDarkTheme 开关），自带夜间模式的站点因此不会被“双重压暗”；针对各站点的识别提示维护在 src/config/detector-hints.config 中。

按站独立设置与排除。它可以按域名记住启用状态和参数差异。右键工具栏图标可以在菜单里切换“为此网站”的开关或打开设置面板，为常访问的站点单独保存一组参数，保存后自动同步，不用每次重调。原生就支持暗色的站点已收录进 src/config/dark-sites.config，无需手动逐个排除。

滤镜与静态模式。滤镜模式用一条 CSS filter 快速翻转整页，静态模式则套用一组预设配色选择器。两者适合临时预览或结构简单的轻量站点，在弹窗里即可切换引擎；四种引擎的默认值、以及部分办公站点默认走滤镜模式的内置设置，都写在 src/defaults.ts 里。

🎛️ 从调参数到写规则：四层定制

定制按深度分四层，用到哪层算哪层。

第一层是参数。在弹窗里可以调亮度、对比度、泛黄、灰度与文字描边，出厂值是亮度 100、对比度 100；觉得页面偏亮时，把亮度降到 70~80，或加一点 sepia 让色温偏暖，观感会柔和不少。

第二层是按站主题。为某个域名单独保存一组参数，并挑选预设配色方案，预设色方案的定义在 src/config/color-schemes.drconf；比如新闻站调亮一档，文档站调暗一档，互不干扰。

第三层是定时与跟随系统。自动化功能支持时间、系统、位置三种模式：设定激活与停用时间后（内置默认时段为 18:00 开、9:00 关），晚上自动启用、早晨自动关闭；也可以完全不设时间，跟随系统主题走。

第四层是写规则。遇到个别元素显示异常的站点，可以针对它写 CSS 修复，命令包括 INVERT（强制反色）、CSS（追加自定义样式）、IGNORE INLINE STYLE（忽略内联样式）等，引擎在转换时逐条应用。社区维护的修复规则库是 src/config/dynamic-theme-fixes.config，自己手写的规则语法与它完全一致。

🔍 源码视角：背景、生成器与注入脚本的协作

按数据流读代码，整个链路并不复杂。src/background/ 下的背景脚本持有全局设置与按站状态，接收 src/ui/ 中弹窗和选项页传来的用户操作，决定当前标签页该用哪个引擎、参数是什么。CSS 本身由 src/generators/ 生成：dynamic-theme.ts 拿主题参数解析页面配色，输出逐选择器的暗色规则，css-filter.ts、svg-filter.ts、static-theme.ts 各自负责另外三种引擎。CSS 生成后交给 src/inject/ 注入页面并应用样式，其 index.ts 是消息枢纽，负责按背景指令应用或清理主题，detector.ts 则判断站点是否已有暗色主题并自动停用。

知识库是一批纯文本配置文件：src/config/static-themes.config 为静态模式提供通用选择器规则，例如把 html 背景强制设为中性色。文件格式简单直接，给新站点补规则并不复杂。

🛠️ 避坑：图片偏色、双重压暗与页面卡顿

图片出现偏色。现象是照片或视频发灰发蓝。原因是滤镜模式把整页过一道滤镜，图片必然变色，引擎需要给 img、video 这类媒体元素叠加反向滤镜还原原色，规则定义在 src/config/inversion-fixes.config；站点结构特殊、规则没命中时就会出现偏色。处理办法是把该站切到动态或静态模式，或对该站临时停用扩展。

自带暗色主题被二次处理。现象是本来偏暗的站点启用后更暗、色彩发灰。原因是检测依赖启发式规则，偶有误判。处理办法是把该站加入排除列表：默认策略就是全局开启、只排除少数误判站点。

页面加载变重。现象是 DOM 密集的页面（大表格、大量内嵌组件）启用后可感知地变慢。原因是动态引擎要收集并重写页面 CSS，耗时与样式体量成正比。处理办法是不常访问的站点改回轻量的滤镜模式，视频平台这类重站直接排除。

Dark Reader 的价值在于先让所有页面可读，再逐站修到舒服。一个落地的起点：装好后先别动全局参数，正常用两天，把显示最不对劲的两三个站点单独调参或补规则，一次十分钟内就能做完。

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