Gloom

Automatically darken light websites. Turn it off for any site when you want the original look.

Gloom is a lightweight Chromium extension (Manifest V3). It inverts light pages into a dark theme, skips pages that already look dark, and remembers per-site opt-outs.

Features

• Automatic dark mode on light http(s) pages
• Skips already-dark pages (opaque dark backgrounds or color-scheme: dark)
• Per-site toggle in the popup — applies instantly, no reload
• Early injection at document_start to reduce light flashes
• Sync'd preferences via chrome.storage.sync across signed-in browsers

Install (developer / unpacked)

1. Clone this repo
2. Open chrome://extensions (or edge://extensions)
3. Enable Developer mode
4. Click Load unpacked and select this folder (the one with manifest.json)

Usage

1. Browse any light website — Gloom darkens it automatically
2. Click the Gloom icon in the toolbar
3. Uncheck Enable on this site to restore the original look
4. Check it again to turn dark mode back on

The toggle updates the live page immediately. No refresh required.

How it works

1. A content script runs at document_start on http:// and https:// pages
2. It checks whether the current hostname is in the disabled list
3. If enabled, it samples the page background (and color-scheme)
4. Transparent backgrounds are treated as light (browser default is white) — this fixes the common bug where sites with rgba(0,0,0,0) body backgrounds were skipped
5. Light pages get a root filter: invert(1) hue-rotate(180deg) stylesheet; media elements are double-inverted so images and video stay natural
6. Popup changes write to chrome.storage.sync; the content script listens for storage.onChanged and applies or removes the theme live

Project structure

gloom/
├── manifest.json
├── icons/                 # Extension icons
├── src/
│   ├── background.js      # Install bootstrap
│   ├── content.js         # Page bootstrap + live updates
│   ├── lib/
│   │   ├── constants.js   # Shared constants / CSS
│   │   ├── storage.js     # Per-site enablement helpers
│   │   └── theme.js       # Detect + apply / remove dark mode
│   └── popup/
│       ├── popup.html
│       ├── popup.css
│       └── popup.js
├── LICENSE
└── README.md

Permissions

Permission	Why
storage	Save which sites you've turned off (synced)
activeTab	Read the current tab hostname and talk to its content script from the popup

Content scripts are limited to http://*/* and https://*/*. Browser pages (chrome://, the Web Store, etc.) are unsupported by design.

Privacy

Gloom does not collect analytics or send browsing data anywhere. The only persisted data is a map of hostnames you've explicitly disabled, stored in your browser's sync storage.

Browser support

• Google Chrome
• Microsoft Edge
• Brave and other Chromium-based browsers

Firefox is not packaged yet (chrome.* APIs only).

Limitations

CSS invert is a simple, universal approach. It works well on most sites, but you may notice quirks with:

• Fixed/parallax backgrounds
• Some blend modes and shadows
• Cross-origin iframes
• Odd canvas / WebGL content

If a site looks wrong, disable Gloom for that hostname from the popup.

Contributing

Issues and pull requests are welcome. Keep the extension dependency-free (no build step) so anyone can load it unpacked and ship it easily.

License

MIT