Dark Mode — 夜间护眼

智能深色模式浏览器扩展，一键将任意网页切换为暗色主题。

核心原理

filter: invert(1) hue-rotate(180deg)

• invert(1) — 白变黑、黑变白，全局色彩反转
• hue-rotate(180deg) — 色相旋转 180°，还原色彩感知
• 图片/视频/Canvas 二次反转，保护媒体颜色不失真

功能特性

功能	说明
🌙 一键切换	点击图标开关深色模式，300ms 平滑过渡
☀️ 亮度调节	50%–150%，自由控制暗度
🌐 站点管理	白名单强制开启 / 黑名单跳过
🔧 专属补丁	内置 10+ 主流站点微调规则
🕐 定时切换	日落自动开启，日出自动关闭
🖥️ 跟随系统	随操作系统深色模式自动切换
⚡ 零延迟	document_start 注入，无闪烁
🔄 SPA 兼容	MutationObserver 覆盖动态内容

项目结构

Dark/
├── manifest.json                 # Chrome MV3 配置
├── src/
│   ├── background/
│   │   └── background.js         # Service Worker（状态管理、定时、系统监听）
│   ├── content/
│   │   ├── content.js            # 核心注入引擎（filter + 媒体保护 + SPA）
│   │   └── content.css           # 兜底覆盖样式
│   └── popup/
│       ├── popup.html            # 弹出面板 UI
│       ├── popup.js              # 面板交互逻辑
│       └── popup.css             # 面板样式（适配系统暗色模式）
├── patches/
│   └── sites.json                # 站点专属补丁配置
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

安装（开发模式）

1. 打开 Chrome，访问 chrome://extensions/
2. 开启右上角 "开发者模式"
3. 点击 "加载已解压的扩展程序"
4. 选择本项目的根目录 Dark/
5. 完成！点击工具栏图标即可使用

站点补丁

补丁文件 patches/sites.json，按域名匹配注入专属 CSS。

示例：

{
  "name": "GitHub",
  "hosts": ["github.com"],
  "css": "html.dark-mode--applied .bg-white { background: transparent !important; }"
}

目前已内置适配：GitHub、Stack Overflow、百度、知乎、Wikipedia、Google、MDN、CSDN、掘金、B站、NPM。

技术栈

• Chrome Extension Manifest V3
• Service Worker（后台状态管理）
• Content Script + MutationObserver（页面注入）
• chrome.storage.sync（跨设备同步）
• chrome.alarms（定时任务）

许可

MIT