☰

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

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

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能，如 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!