Dark Reader 使用指南：让任意网站一键暗黑模式
从一个痛点说起
打开一篇文档类的网页，背景白得像开了远光灯；切到一个暗色背景的代码仓库，眼前又是一亮一暗的来回切换。这种”网页颜色不对”的情况在日常浏览中很常见，而 Dark Reader 想要解决的就是它。
Dark Reader 是一个开源的浏览器扩展，MIT 协议授权，托管在 GitHub 的 darkreader/darkreader 仓库。它做的事情可以一句话概括：动态分析网页的结构和颜色，然后实时生成一个对应的深色主题，让原本白底的页面变成可读的深色调，同时尽量保留原页面的对比度与可读性。它的核心目标，是降低长时间盯屏幕带来的眼睛疲劳。
支持的浏览器覆盖了主流选项：Chrome、Firefox、Microsoft Edge、Safari，以及 Thunderbird 邮件客户端。每个商店页都挂着官方的下载入口，建议以所在浏览器的扩展商店为准。
它能做什么
装上之后，扩展图标上会显示当前网站的”暗黑化”开关状态。点击图标通常可以看到几个直接可调的滑块：
- 亮度（Brightness）：降低页面整体亮度，避免纯白背景刺眼。
- 对比度（Contrast）：让文字和背景的层次更清晰。
- 棕褐色（Sepia）：一种偏暖的滤镜，适合长时间阅读。
- 灰度与模式切换：在某些设置中还可以切换为灰色模式。
更深一层的设置面板里通常会包含：
- 过滤模式：在「动态 / 过滤 / 反转」几种算法之间切换，适配不同类型的网页。
- 站点列表：对指定网站开启或关闭暗黑模式，相当于一个白名单 / 黑名单。
- 主题选择：内置多种深色色板可选。
- 快捷键：用键盘组合键直接开关当前页面的暗黑化。
{{图：Dark Reader 设置面板中的亮度和对比度调节滑块界面}}
三分钟上手
以 Chrome / Edge 这类 Chromium 内核浏览器为例：
- 打开对应浏览器的扩展商店，搜索 “Dark Reader”，点击安装。
- 安装完成后，扩展会自动启用，访问任意网页应该就能看到深色效果已经生效。
- 点击工具栏右侧的 Dark Reader 图标，调整亮度 / 对比度 / 棕褐色这几个滑块到自己觉得舒服的数值。
- 如果某网站显示异常，可以点击图标顶部的开关临时禁用，或者在站点列表里加入黑名单。
Firefox、Safari、Thunderbird 的安装入口类似，分别在各自的官方扩展中心，建议以官网给出的链接为准。
进阶玩法：过滤模式怎么选
Dark Reader 默认在大多数网站上工作良好，但个别网页因为布局复杂（比如大量彩色图表、视频嵌入、游戏页）会出现颜色错位。这时候可以进入设置页，切换不同的过滤模式：
- 动态模式（Dynamic）：逐元素分析颜色，对大多数现代网页适用，是默认选项。
- 过滤模式（Filter）：通过 CSS 滤镜整体调整，速度更快，但精准度略低。
- 反转模式（Invert）：简单地把颜色反转，适合作为应急方案。
如果切换过滤模式后某一类页面看起来更自然，可以把它锁定为该网站下的偏好。
{{图：Dark Reader 设置中的网站白名单和过滤模式切换选项}}
几个典型的使用场景
- 夜间阅读：在关灯或者弱光环境下，把亮度滑块往下拉，避免白色背景刺眼。
- 统一视觉：在多个标签页之间切换时，深色背景让眼睛不需要反复适应明暗。
- 护眼预设：把棕褐色调到轻度，可以减弱蓝光带来的刺激。
- 还原参考色：在需要看截图、配色方案、设计稿的页面上，把 Dark Reader 临时关闭即可还原原貌。
和系统暗色模式的配合
很多操作系统现在都自带”深色模式”开关，浏览器自身也有 prefers-color-scheme 的响应机制。Dark Reader 和系统设置的关系可以这样理解：
- 当系统处于浅色模式时，Dark Reader 会主动把网页变暗。
- 如果希望 Dark Reader 跟随系统切换，可以在设置中启用「自动跟随系统颜色方案」，对应 API 是
DarkReader.auto()风格的调用。 - 一些本身就支持
prefers-color-scheme的网站（比如文档站点、代码托管平台）会跟系统走，此时可以在这些站点上手动禁用 Dark Reader，避免重复叠加。
在自己的网站上集成 Dark Reader
Dark Reader 不只是一个个人扩展，它对外提供了一套 JavaScript API，网站作者可以把它接入自己的站点。安装方式有三种：
- 通过 npm 安装包：
npm install darkreader - 从源码构建：
npm run api - 通过 CDN（如 unpkg、jsDelivr）直接引入脚本
接入后的基本用法（ES 模块风格）大致是这样：
import {
enable as enableDarkMode,
disable as disableDarkMode,
followSystemColorScheme,
exportGeneratedCSS,
isDarkReaderEnabled,
} from 'darkreader';
enableDarkMode({
brightness: 100,
contrast: 90,
sepia: 10,
});
// 让它跟随系统暗色设置
followSystemColorScheme();
// 想导出当前生成的 CSS 字符串可以调用
// const CSS = await exportGeneratedCSS();
if (isDarkReaderEnabled()) {
// 已经在工作
}
disableDarkMode();需要留意的是，Dark Reader 的运行时会向 window 上挂载一个 chrome 对象，用来模拟部分 WebExtension API，集成前最好评估一下和现有脚本的潜在冲突。
{{图：浏览器控制台调用 Dark Reader
评论(0)