Dark Mode in Firefox: OS Settings, Force Dark, NightOwl vs Dark Reader, and Per-Site Control

Dark mode on the web is inconsistent — some sites support it via prefers-color-scheme, others have built-in toggles, and many just don't have it at all. Here's how to get dark mode working everywhere in Firefox, and what each approach actually does.

The Three Types of Dark Mode

1. OS-level dark mode: Your OS (Windows/macOS/Linux) is in dark mode. Firefox's UI switches to dark. Websites that respect prefers-color-scheme: dark CSS media query will also switch.

2. Site-native dark mode: The website has its own dark/light toggle. Common on GitHub, Dev.to, Stack Overflow, etc. Site-specific, requires interaction on each site.

3. Forced dark mode via extension: An extension intercepts all pages and applies dark CSS, regardless of whether the site supports it. Covers everything, but can look inconsistent.

Making OS Dark Mode Work in Firefox

Windows:
Settings → Personalization → Colors → Choose your mode → Dark
Firefox's toolbar and chrome switch automatically. Sites with prefers-color-scheme support switch too.

macOS:
System Preferences → General → Appearance → Dark
Same result.

Linux (GNOME):

gsettings set org.gnome.desktop.interface color-scheme prefer-dark

Firefox reads the GTK theme preference and reports it to websites via prefers-color-scheme.

Verify it's working: In Firefox DevTools → Inspector panel → there's a dark/light mode toggle (looks like two circles, one dark/one light) that lets you toggle between dark and light to preview how a site responds.

Firefox's Built-in Force Dark Mode

Firefox has an experimental forced colors feature:

In about:config:

layout.css.prefers-color-scheme.content-override = 0

Values:

• 0 = Force light
• 1 = Force dark
• 2 = Follow OS (default)

This makes Firefox tell all websites "the user prefers dark mode" regardless of OS setting. Sites that check prefers-color-scheme will use their dark theme. Sites without dark theme support won't change.

NightOwl: Full Forced Dark Mode

For sites that don't respond to prefers-color-scheme, you need an extension that applies dark CSS directly.

NightOwl (available at addons.mozilla.org) injects dark mode CSS into every page, creating a dark appearance even on sites with no dark mode support.

How it works:

• Reads the page's existing colors
• Intelligently inverts dark colors to light and light to dark
• Preserves images (doesn't invert them to look like negatives)
• Handles common patterns like buttons, inputs, borders

Installation: Firefox Add-ons → search "NightOwl" → Add to Firefox.

Once installed: all pages go dark. There's a toolbar icon to toggle for individual sites where the dark mode looks wrong.

Dark Reader (Alternative Extension)

Dark Reader is the most popular forced dark mode extension. It uses a similar approach:

• Filter mode: CSS inversion (faster, less accurate)
• Dynamic mode: Reads actual colors and converts them (slower, more accurate)
• Static mode: Simple brightness inversion

Dark Reader vs NightOwl:
| Feature | Dark Reader | NightOwl |
|---------|-------------|----------|
| Installation base | Very large | Smaller |
| Algorithm | Dynamic/Filter/Static | Smart inversion |
| Performance | Moderate (dynamic mode heavy) | Lightweight |
| Per-site control | Yes | Yes |
| Custom colors | Yes | Yes |
| Open source | Yes | Yes |

Both are solid choices. Dark Reader has more configuration options. NightOwl tends to be lighter on CPU/memory.

Per-Site Control

Both extensions let you disable/enable on a per-site basis. This is important because:

• Some sites already look great in dark mode (GitHub, Dev.to)
• Some sites break with forced dark (certain media players, canvas-heavy apps)
• Some sites have their own dark mode that's better than forced

Quick toggle: Click the extension icon while on a site to toggle dark mode for that domain.

System-Wide Dark Mode Detection Test

To check if your browser is correctly reporting dark mode preference:

Open DevTools → Console:

window.matchMedia('(prefers-color-scheme: dark)').matches
// true = browser reports dark mode preference

Or: DevTools Inspector → Responsive Design Mode toolbar → color scheme toggle button.

Firefox UI Dark Mode

Firefox's own interface (toolbar, tabs, menus) follows OS dark mode setting. But you can force it:

Method 1: Firefox Settings → General → "Manage colors" or Extension themes

Method 2: Install a dark Firefox theme from AMO. Options like "Firefox Alpenglow" have dark variants.

Method 3: about:config → ui.systemUsesDarkTheme = 1 forces dark Firefox UI even if OS is in light mode.

Managing Multiple Dark Mode Sources

If you have both NightOwl/Dark Reader installed AND a site's native dark mode: they can conflict, resulting in white text on white background or black on black.

Best practice:

1. Use OS dark mode (this handles sites that support it natively)
2. Use an extension for everything else
3. Disable the extension on sites that have native dark mode AND respond to prefers-color-scheme

Sites that respond to OS dark mode (no need for extension):

• GitHub (full support)
• Dev.to (full support)
• Stack Overflow
• MDN Web Docs
• Twitter/X
• Reddit (new layout)

Sites that need the extension:

• Older news sites
• Legacy web apps
• Sites with dark toggle but that don't respond to OS dark mode
• Any site that ignores prefers-color-scheme

Scheduled Dark Mode

Neither NightOwl nor Dark Reader have built-in scheduling, but you can:

1. Use OS scheduled dark mode (Windows/macOS both have sunset-to-sunrise dark mode)
2. The browser extension will read the OS preference and toggle accordingly

Windows: Settings → Personalization → Colors → Choose your mode → Custom → Schedule (sunset to sunrise or custom time)

macOS: System Preferences → General → Appearance → Auto (switches at sunset/sunrise automatically)

Once the OS is set, Firefox's prefers-color-scheme detection changes too, and extensions that watch this will switch.