☰

Screen Inversion Overlay (Symbol Toggle + Per-Site Memory)

Toggleable fullscreen inversion overlay using symbols (🌓 / 🌑) with per-site state memory

如何安装

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴、Greasemonkey 油猴子 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Userscripts ，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

（我已经安装了用户脚本管理器，让我安装！）

如何安装

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

（我已经安装了用户样式管理器，让我安装！）

作者
Zxcvr
日安装量
0
总安装量
2
评分
0 0 0
版本
1.4
创建于
2025-12-09
更新于
2025-12-09
大小
3.1 KB
许可证
GNU GPLv3
适用于
所有网站

🌓 Screen Inversion Overlay — Toggleable Dark Mode for Any Website

Many websites and embedded document viewers do not support dark mode.
Even popular dark-mode browser extensions often fail on:

  • PDFs opened in the browser
  • Non-standard document renderers
  • Canvas-heavy websites
  • Legacy sites
  • Internal company portals
  • Pages that block or override dark-mode CSS

This userscript solves the problem by adding a fullscreen white overlay that uses:

mix-blend-mode: difference;

This visually inverts the entire webpage without modifying the page’s structure, styling, or functionality.

✨ Features

🌓 Toggle Button

A compact floating control lets you turn inversion ON or OFF:

  • 🌑 OFF
  • 🌓 ON

🧠 Per-Site Memory

The script remembers your last setting for each domain:

  • If you enable inversion on a certain website, it stays enabled there.
  • Other websites remain unaffected unless toggled manually.

⌨️ Keyboard Shortcut

Press Alt + I to instantly toggle inversion on any page.

🖥 Works Where Extensions Fail

Unlike CSS-based dark mode extensions, this script works even on:

  • Built-in browser PDF viewers
  • Sandboxed content
  • Cross-origin iframes (visually!)
  • Pages that override or block custom styles
  • Websites with complex rendering engines

If you frequently open PDFs or websites that refuse to switch to dark mode, this script is extremely useful.

🧩 How It Works

The script places a non-interactive overlay above the page:

  • White background
  • mix-blend-mode: difference
  • pointer-events: none to avoid blocking clicks
  • High z-index

When enabled, everything behind the overlay appears color-inverted, simulating a full dark mode.

📌 Notes

  • Does not modify site content — purely visual inversion.
  • Completely safe, lightweight, and fast.
  • Works on every site matched by *://*/*.

🙋 Use Case (My Own Motivation)

I created this because many websites I use daily do not go fully dark, even with extensions installed.
Most importantly:

  • PDF files opened in-browser stay blinding white
  • Internal tools at work don't support dark themes
  • Some sites break entirely when dark-mode extensions modify CSS

This script fixed all of that for me.

If you find this tool helpful, feel free to leave feedback or request additional features!