Force Dark Mode 可为任何不提供 dark mode 的网站应用深色配色方案,或覆盖网站的浅色主题。该工具智能地将背景色转换为深色调,调整文字颜色以确保可读性,同时保留图片、视频、Logo 及品牌元素的原始色彩。一键开启,一键关闭——无需重新加载页面。
许多网站至今仍未提供 dark mode 选项,迫使用户在夜间编码、深夜查阅资料或在弱光环境下工作时盯着刺眼的白色背景。浏览器级别的 dark mode(通过 prefers-color-scheme 实现)仅对显式支持它的网站有效。Force Dark Mode 通过应用 CSS filter 和自定义样式覆盖,将浅色背景转换为深色调,同时保留图片色彩和可读性,从而适用于所有网站。这种反转是智能的——它不是简单地应用 filter: invert(1)(那样会使图片色彩反转并导致文字无法阅读),而是专门针对背景色进行处理,调整文字颜色以在新深色背景下保持对比度,并使用色相旋转尽可能还原网站的品牌色彩。最终呈现出舒适的深色阅读体验,同时保持网站的视觉风格。
单击即可开启或关闭 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,降低屏幕眩光,让内容在弱光条件下更易于在投影仪上阅读。
深色背景比亮白页面发出的蓝光更少,有助于在夜间浏览时降低对睡眠周期的影响。
打开 DevSuite Pro 浮动 dock,点击 Force Dark Mode 图标,页面即刻切换为深色配色方案。
正常浏览该网站,在同一网站内跳转页面时 dark mode 持续有效。
再次点击 Force Dark Mode 图标,页面立即恢复原始浅色外观,无需重新加载。