Chrome Extension

Midnight Gnomad

High-contrast, zero-latency dark mode browser extension utilizing CSS filters and automatic dark-theme detection.

Client: David the Gnomad Inc.
  • JavaScript
  • Chrome Extension MV3
  • CSS Filters
  • chrome-extension
  • css
  • accessibility
  • utility

Soothing High-Contrast Nightscapes

Bright webpages cause eye strain, but standard dark mode extensions often introduce lag or break layout colors. Midnight Gnomad provides a high-contrast dark theme by applying CSS filters. It injects styles early during page load to prevent bright white flashes, and checks site tags to avoid modifying sites that already have dark modes enabled.

Technical Highlights

1. Smart Inversion Engine

The extension uses high-performance CSS filters (invert(1) hue-rotate(180deg)) to darken the page layout. To preserve site visuals, it applies reverse filters to images, videos, and media elements, keeping photos and colors natural.

2. Zero-Latency Style Injection

To avoid bright flashes on page load, the content script injects styling rules at document_start before the HTML renders, creating a smooth transition.

3. Native Dark Detection & Whitelisting

To prevent double-inversion on sites that are already dark (like Discord or YouTube Dark Mode), the extension scans background colors, CSS variables, and dark theme attributes, pausing its filters automatically if a dark mode is detected. It also includes a domain whitelist toggle in its glassmorphic popup.