深色模式不只是“变黑”Dark Reader 从安装到调色的实战笔记【免费下载链接】darkreaderDark Reader Chrome and Firefox extension项目地址: https://gitcode.com/gh_mirrors/da/darkreader如果你也是长时间对着电脑办公、或者习惯深夜刷网页的人Dark Reader 值得在浏览器里占一个位置。它是一款把任何网页都变成深色模式的开源扩展不是一键反色那么简单而是真的在“重画”页面。下面这套从安装到微调的路子是我用它一段时间后的完整记录。除了“变黑”Dark Reader 还做了什么它是“重画”不是“反转”很多人的第一反应是“不就是把颜色翻转一下吗”。其实不然纯反色会让照片变鬼影、让白底黑字变得没法看。Dark Reader 是去重新解析页面的样式分清哪块是背景、哪块是文字然后用深色配色把背景重画一遍所以图片基本保留原色原来高亮的文字颜色也大体还在原位。还有一个容易被忽略的细节默认深色背景是 #181a1b文字是 #e8e6e3是偏暖的灰而不是纯黑。这是刻意的——纯黑配纯白亮度反差最大其实最费眼睛。对整天盯屏幕的人来说换成深色后浅色页面带来的蓝光刺激大约能压掉九成笔记本的电量大概也多撑小半小时。三种渲染引擎怎么选默认动态模式什么时候换Dark Reader 内置了三种渲染引擎。默认的动态主题会逐个分析页面元素并重写样式颜色最准开销也最大另外两种走的是整页滤镜一个直接用 CSS 滤镜给整页调色一个用 SVG 矢量滤镜处理都更轻低配机器上能省不少事代价是色彩精度会打折扣。引擎工作原理适合什么动态默认按元素重画样式日常浏览颜色最准CSS 滤镜整页直接调色老设备、只求流畅SVG 滤镜矢量滤镜处理整页动态模式下大面积错色的页面我一般保持默认遇到某个页面大图或图表颜色翻车的时候再切去对比另外两种。我的日常用法两个滑杆加一个例外先调真正影响眼睛的两个数设置面板里最重要的两个滑杆是亮度和对比度。我的习惯是亮度调到 90、对比度保持 100暗一点但不发闷文字依然清楚。如果页面颜色块太多显得乱把灰度拉到 10% 到 15%视觉噪音会低一个档次。还有一个很实用的功能是给某个网站单独调深色模式参数只针对这一个站点覆盖亮度、对比度、灰度全局设置不动。某个阅读网站总显得太刺眼时我就给它单独一套参数。网站自带深色主题时放过它扩展内置了一份超过 1300 个站点的排除名单源码里就是 src/config/dark-sites.config这些站点本来就是深色的扩展见到就直接跳过不再二次“加深”。如果你发现某个站点被处理得发闷发灰把那个站点的开关关掉就行不用动任何参数。想更高级一点换配色和写 CSS现成的配色方案能省掉选色想换整体氛围不必自己抠色值。仓库里附了一套现成配色参见 src/config/color-schemes.drconfCatppuccin、Dracula、Deep Ocean 这些都在里面界面上挑名字就行。想自己定义一条格式简单到这种程度DARK background: #181a1b text: #e8e6e3存下来就是一个新配色一行背景色一行文字色。页面不听话时的兜底自定义 CSS每个站点在设置里都有独立的样式表入口可以贴一小段只在这个站点生效的 CSS。比如某站点的横幅还是白得刺眼写几行.site-header { background: #1e1e1e !important; color: #ddd !important; }保存后刷新那块区域就会变成深底亮字。这是对付顽固页面的最后手段比任何滑杆都精准。想从源码入手三条命令构建技术向的话整个项目从源码构建也就是三条命令的事git clone https://gitcode.com/gh_mirrors/da/darkreader cd darkreader npm install npm run build跑完之后你会得到一个构建产物目录把它作为扩展加载进浏览器就能直接用了。普通用户完全不用走这一步浏览器商店安装即可。回头看这篇文章其实就回答了三件事为什么默认效果已经不错、两个滑杆怎么找到最舒服的参数、碰到特殊页面时有哪些兜底手段。深色模式从来不是一个开关而是一套给自己找舒服页面的办法。如果这篇对你有用欢迎去仓库点个 Star遇到没适配好的网站也建议顺手提个 Issue。【免费下载链接】darkreaderDark Reader Chrome and Firefox extension项目地址: https://gitcode.com/gh_mirrors/da/darkreader创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 深色模式不只是“变黑”：Dark Reader 从安装到调色的实战笔记
深色模式不只是“变黑”Dark Reader 从安装到调色的实战笔记【免费下载链接】darkreaderDark Reader Chrome and Firefox extension项目地址: https://gitcode.com/gh_mirrors/da/darkreader如果你也是长时间对着电脑办公、或者习惯深夜刷网页的人Dark Reader 值得在浏览器里占一个位置。它是一款把任何网页都变成深色模式的开源扩展不是一键反色那么简单而是真的在“重画”页面。下面这套从安装到微调的路子是我用它一段时间后的完整记录。除了“变黑”Dark Reader 还做了什么它是“重画”不是“反转”很多人的第一反应是“不就是把颜色翻转一下吗”。其实不然纯反色会让照片变鬼影、让白底黑字变得没法看。Dark Reader 是去重新解析页面的样式分清哪块是背景、哪块是文字然后用深色配色把背景重画一遍所以图片基本保留原色原来高亮的文字颜色也大体还在原位。还有一个容易被忽略的细节默认深色背景是 #181a1b文字是 #e8e6e3是偏暖的灰而不是纯黑。这是刻意的——纯黑配纯白亮度反差最大其实最费眼睛。对整天盯屏幕的人来说换成深色后浅色页面带来的蓝光刺激大约能压掉九成笔记本的电量大概也多撑小半小时。三种渲染引擎怎么选默认动态模式什么时候换Dark Reader 内置了三种渲染引擎。默认的动态主题会逐个分析页面元素并重写样式颜色最准开销也最大另外两种走的是整页滤镜一个直接用 CSS 滤镜给整页调色一个用 SVG 矢量滤镜处理都更轻低配机器上能省不少事代价是色彩精度会打折扣。引擎工作原理适合什么动态默认按元素重画样式日常浏览颜色最准CSS 滤镜整页直接调色老设备、只求流畅SVG 滤镜矢量滤镜处理整页动态模式下大面积错色的页面我一般保持默认遇到某个页面大图或图表颜色翻车的时候再切去对比另外两种。我的日常用法两个滑杆加一个例外先调真正影响眼睛的两个数设置面板里最重要的两个滑杆是亮度和对比度。我的习惯是亮度调到 90、对比度保持 100暗一点但不发闷文字依然清楚。如果页面颜色块太多显得乱把灰度拉到 10% 到 15%视觉噪音会低一个档次。还有一个很实用的功能是给某个网站单独调深色模式参数只针对这一个站点覆盖亮度、对比度、灰度全局设置不动。某个阅读网站总显得太刺眼时我就给它单独一套参数。网站自带深色主题时放过它扩展内置了一份超过 1300 个站点的排除名单源码里就是 src/config/dark-sites.config这些站点本来就是深色的扩展见到就直接跳过不再二次“加深”。如果你发现某个站点被处理得发闷发灰把那个站点的开关关掉就行不用动任何参数。想更高级一点换配色和写 CSS现成的配色方案能省掉选色想换整体氛围不必自己抠色值。仓库里附了一套现成配色参见 src/config/color-schemes.drconfCatppuccin、Dracula、Deep Ocean 这些都在里面界面上挑名字就行。想自己定义一条格式简单到这种程度DARK background: #181a1b text: #e8e6e3存下来就是一个新配色一行背景色一行文字色。页面不听话时的兜底自定义 CSS每个站点在设置里都有独立的样式表入口可以贴一小段只在这个站点生效的 CSS。比如某站点的横幅还是白得刺眼写几行.site-header { background: #1e1e1e !important; color: #ddd !important; }保存后刷新那块区域就会变成深底亮字。这是对付顽固页面的最后手段比任何滑杆都精准。想从源码入手三条命令构建技术向的话整个项目从源码构建也就是三条命令的事git clone https://gitcode.com/gh_mirrors/da/darkreader cd darkreader npm install npm run build跑完之后你会得到一个构建产物目录把它作为扩展加载进浏览器就能直接用了。普通用户完全不用走这一步浏览器商店安装即可。回头看这篇文章其实就回答了三件事为什么默认效果已经不错、两个滑杆怎么找到最舒服的参数、碰到特殊页面时有哪些兜底手段。深色模式从来不是一个开关而是一套给自己找舒服页面的办法。如果这篇对你有用欢迎去仓库点个 Star遇到没适配好的网站也建议顺手提个 Issue。【免费下载链接】darkreaderDark Reader Chrome and Firefox extension项目地址: https://gitcode.com/gh_mirrors/da/darkreader创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考