Dark Reader 暗黑模式扩展：从安装到调参的完整流程

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

Dark Reader 是一款 MIT 开源的浏览器扩展，它会分析任意网页的结构与配色，自动为该页面生成一套深色主题，用来缓解长时间夜间浏览带来的视觉疲劳。它支持 Chrome、Firefox、Edge、Safari 与 Thunderbird，代码完全开放。读完本文，你可以独立完成安装与启用、按站点调整亮度和对比度、挑选预设配色方案，并了解如何从源码构建出最新的扩展。

它到底做了什么：一套配色引擎加三个模块

理解 Dark Reader，关键是想清楚"谁在决定颜色"。它并不是简单地把白色反成黑色，而是先分析页面里每个元素的背景、文字与图片，再按你选择的"主题引擎"重新计算颜色。源码 src/generators/theme-engines.ts 里一共定义了四种引擎：cssFilter、svgFilter、staticTheme 和 dynamicTheme。其中 dynamicTheme（动态主题）会逐条重写网页 CSS，效果最完整，也是默认值；cssFilter（滤镜模式）用整页滤镜一次性转换，速度最快但细节稍弱；staticTheme（静态主题）则用一组固定的深色变量替换整站配色，观感统一。

这些引擎由三层代码协作驱动：src/background/ 负责扩展的生命周期与消息分发，是扩展的"大脑"；src/inject/ 是真正被注入网页、执行颜色转换的脚本；而 src/defaults.ts 集中存放了所有默认参数——亮度 100、对比度 100、灰度 0、色度 0，默认引擎为 dynamicTheme，并默认对所有站点启用。

两条上手路径

装完直接可用

最省事的路线是在浏览器扩展商店搜索 "Dark Reader" 安装，装好后打开任意浅色网页，页面会自动变暗，无需任何操作。点击工具栏图标即可打开控制面板，里面就是亮度、对比度、灰度、色度四个滑块，拖动时页面会实时刷新预览。想限定作用范围时，在面板里把"激活方式"从"所有站点"改成"以下站点"，只勾选你需要的网站即可。

按需配置：从源码构建

如果你想体验最新代码或做二次开发，可以先克隆仓库再构建：

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

构建要求 Node.js 15 及以上。完成后会在build/release/下得到darkreader-chrome.zip（供 Chromium 系浏览器）和darkreader-firefox.xpi（供 Firefox），用浏览器的"加载已解压扩展"方式安装即可。改行为前，建议先读 src/background/ 与 src/inject/ 两个目录。

调优速查：按目标选参数

想要更暗

亮度（brightness）控制整体明暗，取值范围 50–150，默认 100。夜间环境把它降到 75–90，屏幕的"光感"会明显减弱。如果页面偏亮、细节被白底淹没，再往上加。

文字更清晰

对比度（contrast）同样在 50–150 之间调节，用来拉开文字与背景的差距。当文字发虚、边缘模糊时，把它调到 95 以上通常会有明显改善。

页面更安静

灰度（grayscale）与色度（sepia）都从 0 到 100。灰度让彩色元素变淡，广告、横幅抢眼时适当加高，内容区会更安静；色度加一层暖黄调，适合喜欢纸感、想进一步降低蓝光感的人。

💡 参数按站点独立保存：改某网站时只点该站点面板的"保存设置"，其他站点不受影响，全站默认共用上面这套主题。想直接换一整套协调的配色，可以到配色方案下拉里选，例如 Catppuccin（深色背景 #1e1e2e、文字 #cdd6f4）、Dracula、GitHub Modern、Nord、Tokyo Night 等，它们都定义在 src/config/color-schemes.drconf，深色与浅色两套变量会同时生效。

常见问题

某页面图片发灰、颜色失真？多数是因为动态主题把图片也当背景处理。可以试着调高亮度，或把该站点临时切到滤镜模式对比效果。

打开某网站完全没有变暗？先确认该站点没有被排除在启用列表外，把它加入"以下站点"即可。

在线文档（Google Docs、SharePoint、OneDrive 等）效果不对？这类站点默认就被配置为使用滤镜模式，见 src/defaults.ts 里的filterModeSites，建议沿用默认，别手动改回动态主题。

网站本身已是深色，却被二次变暗？Dark Reader 默认开启"检测页面原生深色主题"（detectDarkTheme），会识别并避免二次转换；若看到双重变暗，先确认这项没被关掉。

⚠️ 想在 Firefox 上对受限页面生效，需要在 设置 → 高级 里启用受限页面选项，并按仓库 README 的说明修改 Firefox 的 about:config 偏好项后再刷新页面。"同步站点修复"默认是关闭的，新修复随每个版本一起分发；要手动开启，需先在扩展图标的 Dev tools → Advanced 中启用新设计预览，再到 设置 → 高级 打开 "Synchronize sites fixes"。更底层的修复规则存放在 src/config/dynamic-theme-fixes.config 等文件中，随版本更新。

延伸

• 仓库根目录的 README 写了构建、站点修复与受限页面的完整步骤，是最直接的一手资料。
• 官网的 help 页面汇总了大部分常见问题，遇到细节可以先在这里找答案。
• 关注扩展商店的版本更新，即可拿到新站点修复与兼容性改进。

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