如何通过Tampermonkey、Dark Reader等浏览器扩展为本地HTML文件添加样式

让现有工具生效的配置方法 #

Dark Reader适配本地文件 #

• 打开浏览器扩展管理页：Chrome输入chrome://extensions/，Edge输入edge://extensions/，Firefox打开about:addons
• 找到Dark Reader扩展，进入详情设置页
• 勾选「允许访问文件网址」选项，重启浏览器后打开本地HTML即可自动触发Dark Reader的深色规则

Tampermonkey适配本地文件 #

• 同样进入Tampermonkey扩展的详情设置页，开启「允许访问文件网址」权限
• 打开你自制的深色模式脚本，在头部元数据区新增匹配规则：添加// @match file:///*即可匹配所有本地HTML文件，如需限定特定目录可调整路径规则，例如// @match file:///D:/Software-Manuals/*
• 保存脚本后刷新本地页面即可生效

其他适配本地文件的深色模式实现方案 #

• 浏览器全局强制深色模式
  无需扩展即可实现全页面（含本地文件）深色效果：
  • Chrome/Edge：地址栏输入chrome://flags/#enable-force-dark，将该选项设置为Enabled后重启浏览器
  • Firefox：地址栏进入about:config，搜索layout.css.prefers-color-scheme.content-override，将值修改为0即强制所有页面优先使用深色模式
• 本地HTML嵌入深色样式
  针对长期使用的固定本地手册，可以直接在HTML文件的<head>标签内插入全局深色CSS，无需依赖扩展：

  <style>
    /* 全局颜色反转实现深色效果 */
    html {
      filter: invert(1) hue-rotate(180deg);
      background: #000 !important;
    }
    /* 还原媒体元素颜色避免显示异常 */
    img, video, svg, iframe, canvas {
      filter: invert(1) hue-rotate(180deg);
    }
  </style>
  

• 本地启动HTTP服务访问
  在本地HTML所在目录启动轻量HTTP服务，通过localhost地址访问文件，和普通网页访问逻辑完全一致，所有网页扩展均可正常生效：
  已安装Python的环境下，直接在目标目录打开终端执行python -m http.server 8080，之后浏览器访问http://localhost:8080即可浏览目录下的所有HTML文件。

内容的提问来源于stack exchange，提问作者AxJ