Dark Mode in Firefox: OS Settings, CSS, and Extensions (Developer and User Guide)

Most dark mode discussion focuses on operating system-level settings or browser dark mode CSS media queries. But for the web, you need something that works on every site — including those that haven't implemented prefers-color-scheme. Here's how browser-level dark mode extensions work and when to use each approach.

The Three Layers of Dark Mode

Layer 1: OS dark mode — Affects system apps, native UI. Does not affect web content.

Layer 2: prefers-color-scheme: dark — A CSS media query that sites can respond to. Only works if the site implements it. Firefox passes the OS preference automatically.

Layer 3: Browser extension — Inverts or transforms colors on any site regardless of whether it supports dark mode. Works everywhere.

Most users need all three for a complete dark mode experience.

Firefox's Built-in Dark Mode Settings

Firefox itself respects your OS dark mode setting for the browser chrome (menus, toolbars, the UI). You can also override this:

about:config → ui.systemUsesDarkTheme → 1 (force dark), 0 (force light)

Or install a Firefox theme: Add-ons → Themes → search "dark" for many options including the official Firefox dark theme.

For web content: Enable "dark mode" in Firefox's color settings:
Settings → General → Colors → Override colors → "With High Contrast Mode" or use a custom theme that sets dark defaults.

But this is crude — it sets your OS preference signal to dark, which is passed to CSS media queries. Sites without dark mode support won't change.

Extension Approach: Dark Reader vs NightOwl

Dark Reader

Dark Reader is the dominant dark mode extension. It works by analyzing a site's CSS and applying an inverted/modified color scheme. This works on essentially every site.

Strengths:

• Works everywhere (actively processed)
• Highly configurable (brightness, contrast, sepia, custom CSS per site)
• Large user base = well-maintained
• Can import custom themes

Limitations:

• Performance impact on complex pages (it rewrites CSS)
• Some sites look wrong (color processing isn't always perfect)
• More complex configuration surface

NightOwl

NightOwl (Firefox extension) takes a simpler approach: CSS-based inversion and color adjustment without the performance cost of DOM reprocessing.

Strengths:

• Lightweight (minimal impact on page load)
• Fast toggle
• Works well for text-heavy sites

When to choose: If you want dark mode for reading-heavy browsing (documentation, articles, news) without the overhead of full CSS reprocessing.

Available on AMO: https://addons.mozilla.org/en-US/firefox/addon/nightowl-dark-mode/

For OLED/Battery Concerns

True black backgrounds (OLED optimization) are specifically handled by some extensions. NightOwl uses near-black backgrounds to minimize OLED pixel power draw. Dark Reader in "High Contrast" mode can be configured similarly.

Testing prefers-color-scheme as a Developer

If you're building a site, you can test dark mode behavior in Firefox DevTools:

1. Open DevTools (F12)
2. Inspector panel → click the "Toggle prefers-color-scheme" button in the toolbar (it looks like a half-moon or sun/moon toggle)
3. The simulated color scheme changes, and you can see your CSS media queries respond

This avoids changing your actual OS dark mode setting just to test a feature.

CSS Dark Mode Implementation Reference

For developers implementing dark mode:

/* Define variables for both modes */
:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --border: #e0e0e0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #e0e0e0;
    --border: #333333;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

Use CSS custom properties (variables) for all colors — this makes adding dark mode a matter of redefining variables, not touching every component.

Dark Mode and Images

One issue with inverted dark mode: images look wrong (inverted). Standard fix in CSS:

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.9);
  }
}

Some dark mode extensions handle this automatically by detecting image elements and not inverting them.

The Comfortable Dark Mode Stack

For browsing:

1. OS dark mode enabled (affects native apps)
2. Firefox dark theme (affects browser UI)
3. Dark Reader or NightOwl (affects web content)

For developing:

1. VS Code/editor dark theme
2. Firefox DevTools dark theme (automatic with OS)
3. Firefox prefers-color-scheme toggling in DevTools for testing

The extension layer is the only reliable way to have dark mode on sites that haven't implemented it themselves — which in 2024 is still a significant portion of the web.