资讯动态

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

发布时间:2026/10/30 2:08:16 来源:尧图企业网站定制
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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑