Eye strain from bright web pages late at night is a real problem. There are several approaches to dark mode in Firefox, each with different trade-offs.
Approach 1: OS-Level Dark Mode
The simplest approach: enable dark mode in your OS settings.
- Windows: Settings → Personalization → Colors → Choose your mode → Dark
- macOS: System Settings → Appearance → Dark
- Linux (GNOME): Settings → Appearance → Dark
Sites that support prefers-color-scheme: dark will respond to your OS setting. Many modern sites (GitHub, Reddit, Stack Overflow, Linear, etc.) have built-in dark modes tied to this preference.
Limitation: Sites that don't implement dark mode still appear with white backgrounds.
Approach 2: Dark Reader
Dark Reader is the most popular approach. It transforms any site's colors to a dark scheme using inversion, contrast adjustments, and sepia filters.
Pros:
- Works on every site
- Highly configurable (brightness, contrast, sepia, grayscale per-site)
- Active development, large community
Cons:
- Sometimes causes visual glitches (inverted images, broken gradients, text contrast issues)
- Higher CPU usage (re-renders pages)
- Modifies page colors aggressively, which can break sites that rely on specific color schemes
Approach 3: NightOwl — CSS-Only Dark Mode
NightOwl takes a different approach. Instead of manipulating every page's DOM and CSS, it injects a pure CSS dark mode using prefers-color-scheme: dark media queries and browser-level overrides.
Pros:
- Lightweight — no JavaScript injection, pure CSS
- Fast — no DOM manipulation per page
- Works with sites that support
prefers-color-scheme - Less likely to cause visual glitches than full DOM rewriting
Cons:
- Sites that don't support
prefers-color-schemedon't get styled - Less configurable per-site compared to Dark Reader
Best fit for: Users who primarily visit modern sites (GitHub, Hacker News, Notion, etc.) that support prefers-color-scheme and want minimal performance overhead.
Approach 4: Firefox's Built-In Color Forcing
Firefox has an experimental setting to force dark mode on all pages via the browser's own rendering pipeline.
In about:config:
layout.css.prefers-color-scheme.content-override = 0
Values:
- 0 = Force dark (tells all sites you prefer dark)
- 1 = Force light
- 2 = System default (follow OS setting)
This sets the prefers-color-scheme CSS media query result for all pages. Sites that respond to it show their built-in dark mode. Sites that don't respond to it are unaffected.
Approach 5: Firefox Color Extension
Firefox Color customizes the browser UI — toolbar, tabs, address bar. Doesn't affect page content, but pairs well with OS dark mode to give you a full dark browser experience when pages also support dark mode.
Setting Up Firefox for Night Work
A practical combination that works well:
- Enable OS dark mode — catches all sites with proper dark mode support
- Install NightOwl — extends dark mode to more sites with minimal overhead
- Night mode in system display settings (Windows Night Light, macOS Night Shift, Linux Redshift) — reduces blue light from the whole screen, not just the browser
This combination covers most browsing without the visual glitches that come from aggressive DOM manipulation.
For Developers: Simulating Dark Mode
In Firefox DevTools: press F12 → Responsive Design Mode (or the moon/sun icon in the toolbar) → color scheme emulation.
You can switch between light and dark mode in DevTools without changing your OS setting — useful for testing how your site looks in both modes.
Comparing Dark Reader vs NightOwl
| Feature | Dark Reader | NightOwl |
|---|---|---|
| Works on all sites | Yes (with manipulation) | Modern sites only |
| Performance overhead | Higher | Lower |
| Visual glitches | Occasional | Rare |
| Per-site customization | Extensive | Limited |
| Extension size | Larger | Smaller |
For users who spend most time on modern developer-oriented sites, NightOwl's approach is faster and cleaner. For users who visit a wide range of older or custom-styled sites, Dark Reader's coverage is better despite the overhead.
The best dark mode solution depends on which sites you visit most. Try the OS setting + prefers-color-scheme approach first — if it covers your main sites, you may not need an extension at all.
Top comments (0)