← 返回功能
Free

强制 dark mode

Force Dark Mode 可为任何不提供 dark mode 的网站应用深色配色方案,或覆盖网站的浅色主题。该工具智能地将背景色转换为深色调,调整文字颜色以确保可读性,同时保留图片、视频、Logo 及品牌元素的原始色彩。一键开启,一键关闭——无需重新加载页面。

许多网站至今仍未提供 dark mode 选项,迫使用户在夜间编码、深夜查阅资料或在弱光环境下工作时盯着刺眼的白色背景。浏览器级别的 dark mode(通过 prefers-color-scheme 实现)仅对显式支持它的网站有效。Force Dark Mode 通过应用 CSS filter 和自定义样式覆盖,将浅色背景转换为深色调,同时保留图片色彩和可读性,从而适用于所有网站。这种反转是智能的——它不是简单地应用 filter: invert(1)(那样会使图片色彩反转并导致文字无法阅读),而是专门针对背景色进行处理,调整文字颜色以在新深色背景下保持对比度,并使用色相旋转尽可能还原网站的品牌色彩。最终呈现出舒适的深色阅读体验,同时保持网站的视觉风格。

实时预览
example.com/docs Dark Mode: ON
Before (Light)
After (Dark) ✓
关键功能

一键切换

单击即可开启或关闭 dark mode,无需重新加载页面——深色主题通过 CSS class 切换即时应用和移除,过渡流畅,不会出现白屏闪烁。

智能色彩反转

背景变暗的同时,文字颜色变亮以确保可读性。算法专门针对 background-color 属性进行处理,而非全局反转,保留网站的色彩关系与视觉层次。

图片与视频保护

图片、视频、SVG 及 canvas 元素均不受色彩反转影响。照片呈现自然色彩,Logo 保留品牌色,视频内容正常播放——只有页面背景和文字颜色发生变化。

适用于所有网站

无论网站采用何种 CSS 架构均可应用。支持静态 HTML 网站、React SPA、WordPress 主题、Web 应用、文档站点等各类场景,无需针对特定网站进行配置。

减少视觉疲劳

深色背景配合浅色文字可降低屏幕发出的光线量,减轻长时间使用时的视觉疲劳。在黑暗环境下工作或夜间浏览时尤为有益。

无需持久化

dark mode 仅在工具开启时保持有效。在同一网站内跳转页面时效果持续,关闭后立即恢复——不会修改任何网站数据,也不会存储任何偏好设置。

常见用例

深夜编码与查阅资料

在夜间编码时,对文档站点、Stack Overflow、MDN 及各类参考页面强制启用 dark mode,在等待网站推出原生深色主题之前有效减轻视觉疲劳。

全局深色环境

如果你希望所有页面都使用 dark mode,Force Dark Mode 可以填补空白——将其应用于工作流中少数尚未提供原生深色主题的网站。

测试 dark mode 可读性

在自己的网站上强制启用 dark mode,预览色彩反转后的效果。在投入时间实现完整深色主题之前,这能提供一个粗略的预览参考。

在暗室中演示

在光线昏暗的房间中进行演示?对任意网站启用 dark mode,降低屏幕眩光,让内容在弱光条件下更易于在投影仪上阅读。

减少蓝光暴露

深色背景比亮白页面发出的蓝光更少,有助于在夜间浏览时降低对睡眠周期的影响。

如何使用
1

激活 Force Dark Mode

打开 DevSuite Pro 浮动 dock,点击 Force Dark Mode 图标,页面即刻切换为深色配色方案。

2

在 dark mode 下浏览

正常浏览该网站,在同一网站内跳转页面时 dark mode 持续有效。

3

完成后关闭

再次点击 Force Dark Mode 图标,页面立即恢复原始浅色外观,无需重新加载。

准备好尝试了吗? 强制 dark mode?

免费安装 DevSuite Pro,为您的浏览器解锁 39 多个开发者工具。

添加到 Chrome 添加到 Edge 添加到 FireFox