NightOwl for Firefox: True Dark Mode for Every Website (Even Sites Without CSS Dark Mode)

Night mode for the web is inconsistent — some sites respect your OS dark mode preference, others have their own dark mode settings, and some don't support dark mode at all. NightOwl is a Firefox extension that applies dark mode universally across all websites, using intelligent color inversion that preserves images and media.

The Problem with Dark Mode on the Web

OS-level dark mode (prefers-color-scheme: dark) only works if the website implements CSS dark mode:

/* Site developer wrote this */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

Most modern sites do implement this. But many older sites, documentation pages, and blogs don't — they're always white backgrounds.

Browser dark mode (about:config → layout.css.prefers-color-scheme.content-override) forces all sites to pretend you prefer dark. This works with sites that implemented dark mode CSS. Still doesn't affect sites with no dark mode support.

Extension-based dark mode — tools like NightOwl — apply dark mode even to sites that have zero dark mode CSS. They do this by inverting colors, inverting again for images (so images look natural), and applying heuristic rules to avoid turning things like checkboxes inside-out.

Installing NightOwl

Install from Firefox Add-ons (AMO):

• Search "NightOwl" at https://addons.mozilla.org/firefox/extensions/
• One-click install, no account required

After installation, a moon icon appears in the Firefox toolbar.

How NightOwl Works

NightOwl injects CSS into every page that:

1. Inverts all colors — white backgrounds become dark, dark text becomes light
2. Inverts images/videos again — double-inversion returns them to original appearance
3. Adjusts hue — pure color inversion makes blues look orange; NightOwl adjusts the hue to maintain natural color appearance
4. Preserves media — images, videos, and SVGs are double-inverted to preserve their original appearance

The result: a consistently dark experience on any website, with photos and media looking natural.

NightOwl vs. Dark Reader

Dark Reader is the most popular dark mode extension. Comparison:

Feature	NightOwl	Dark Reader
Performance	Low overhead	Higher overhead (CSS regeneration)
Approach	CSS filter inversion	Dynamic style generation
Customization	On/off + site exceptions	Brightness, contrast, sepia, fonts
AMO Recommended	Not yet	✅ Recommended badge
Size	~50KB	~2MB
Algorithm	Fast CSS filter	Smart inversion + custom styles

NightOwl is a lightweight option for users who want simple, performant dark mode. Dark Reader is better for users who want more control and a wider algorithm.

Site Exceptions

Some sites look better with their native dark mode:

1. Click the NightOwl toolbar icon
2. Toggle "Disable on this site"
3. Sites like GitHub, Twitter, and most Google products have native dark modes that look better than NightOwl's inversion

Or schedule NightOwl to activate at specific hours — useful if you only want dark mode at night.

Pairing with OS Dark Mode

The ideal setup:

1. Enable OS dark mode (macOS: System Preferences → Appearance; Linux: GNOME/KDE settings)
2. Install NightOwl for sites without dark mode CSS
3. Disable NightOwl on sites with good native dark modes

This way: sites with native dark mode (prefers-color-scheme: dark) use their optimized dark theme, and sites without it get NightOwl's inversion.

Power Users: Keyboard Shortcut

You can assign a keyboard shortcut to toggle NightOwl:

1. Go to about:addons → click the gear icon → "Manage Extension Shortcuts"
2. Find NightOwl → set your preferred shortcut
3. Toggle quickly without clicking the toolbar icon

Why Not Just Use Firefox's Built-In Dark Mode?

Firefox 96+ added a forced dark mode via layout.css.prefers-color-scheme.content-override = 0. This works on sites that have implemented prefers-color-scheme: dark. It doesn't work on sites that have no dark mode CSS at all.

NightOwl fills the gap — it inverts those "no dark mode" sites, while sites with native dark modes respond to the OS preference and look correct natively.

Performance Consideration

CSS filter-based dark mode (NightOwl's approach) runs on the GPU — it applies a pixel-level filter to the rendered output rather than regenerating all CSS. This is very lightweight. Most users report no noticeable performance impact.

Sites with heavy animations may have slight performance differences because the filter is applied after rendering. For sites where this matters (browser games, WebGL demos), disable NightOwl on that site.

Accessibility: High Contrast Mode

NightOwl's inversion can actually help users with certain visual impairments — high contrast between light text and dark background reduces eye strain in low-light environments. This is a common accessibility need (not just a comfort preference).

For users who need Windows High Contrast mode or macOS Increase Contrast, NightOwl complements but doesn't replace those OS-level settings.