Why Most Dark Mode Extensions Get It Wrong (And What Actually Works)

Dark mode extensions fall into a few distinct technical approaches, and the differences matter a lot for reliability.

The Three Approaches

1. CSS Filter (Invert + Hue-Rotate)

The simplest approach: apply filter: invert(1) hue-rotate(180deg) to the root element, then re-invert images with img, video, picture { filter: invert(1) hue-rotate(180deg) }.

Pros: Works on any page, no site-specific rules needed.
Cons: Color accuracy suffers. Reds shift to cyan, blues shift to yellow. Photography looks wrong.

This is what NightOwl uses. For reading-heavy pages (documentation, articles, forums), the color shift is barely noticeable. For design-heavy sites with specific color branding, it can look off.

2. Dynamic CSS Rewriting

Some extensions try to analyze the page's existing colors and rewrite them to dark equivalents. They look at computed styles, remap light backgrounds to dark ones, and adjust foreground colors for contrast.

Pros: Better color accuracy in theory.
Cons: Slower, more likely to break complex layouts, and often inconsistent across frameworks. Sites using CSS-in-JS or Shadow DOM frequently break.

3. Browser-Level Override

Firefox has an experimental layout.css.prefers-color-scheme.content-override setting and a "Force Dark Mode" option in about:config. Chrome has similar.

Pros: Integrated at the rendering layer.
Cons: Not easy to toggle per-site, may break sites that detect color scheme to serve different assets, and requires manual configuration.

When Each Approach Makes Sense

If you want dark mode on specific stubborn sites (documentation, forums, wikis): a CSS filter extension like NightOwl is the right tool. Toggle it per domain, minimal overhead.

If you want dark mode everywhere by default with high accuracy: the browser's built-in override is worth trying first, even if it requires about:config.

If you need pixel-perfect themes for specific popular sites: look for site-specific stylesheets (Stylus + userstyles.world has thousands of hand-crafted dark themes for popular sites).

The Implementation Detail That Matters

One underappreciated detail: the CSS filter approach has to re-invert images and videos — otherwise your photos look like X-ray negatives. A well-implemented extension handles this with a rule like:

html {
  filter: invert(1) hue-rotate(180deg);
}
img, video, picture, iframe, [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

The re-inversion on images cancels out the parent inversion, so photos render normally. If an extension doesn't handle this, embedded media will look inverted.

---

The tldr: for most use cases, a per-domain CSS filter extension works well enough. The implementation is simple and reliable. For sites that need precise color accuracy, site-specific userstyles are more work but better results.