Firefox Dark Mode: Every Option Explained (and Which Actually Works)

Firefox has at least four different mechanisms for dark mode, and they work differently. If you've set OS dark mode and still see bright websites, here's why and what to do about it.

---

Option 1: OS System Dark Mode

Enable dark mode at the OS level (macOS System Preferences, Windows Settings, or your Linux desktop environment's settings).

What it does: Triggers the prefers-color-scheme: dark CSS media query for any website that listens for it.

What it doesn't do: Has no effect on websites that don't implement a dark mode at all, or sites that implement it inconsistently.

Verdict: Works great for modern sites (GitHub, Twitter/X, Slack, etc.) that properly respond to the media query. Does nothing for sites that ignore it.

---

Option 2: Firefox's Built-In Dark Theme

Settings → More Tools → Themes → Dark

This changes Firefox's own UI — the tab bar, sidebar, and toolbar — to dark. This is purely cosmetic for the browser chrome.

What it does: Makes Firefox's interface dark.
What it doesn't do: Doesn't affect website content at all.

Verdict: Nice for aesthetics, but not a solution for dark website content.

---

Option 3: about:config Force Override

Open about:config and search for ui.systemUsesDarkTheme:

• Set the value type to Number and value to 1 (dark)

This tells Firefox to report that the system theme is dark, even if your OS is set to light. This triggers prefers-color-scheme: dark for all websites.

What it does: Forces the dark media query for all sites, regardless of your OS setting.

What it doesn't do: Still only works on sites that check the CSS media query. Sites that don't implement prefers-color-scheme at all are unaffected.

Verdict: Useful if you want websites to use their dark modes but keep your OS in light mode (or vice versa). Doesn't solve the underlying problem of sites that never implemented dark mode.

---

Option 4: CSS Inversion Extension (Forces Every Site)

For sites that don't implement dark mode at all, you need a browser extension that applies CSS transformations directly to the page.

NightOwl uses CSS invert() and hue-rotate() to flip colors on any page:

html {
  filter: invert(90%) hue-rotate(180deg);
}
img, video, canvas, svg {
  filter: invert(100%) hue-rotate(180deg);
}

The image inversion is the key trick: images get double-inverted (once by the html rule, once by the img rule), so photos look correct while the background turns dark.

Per-domain toggle: NightOwl lets you enable or disable it per site. Sites like GitHub that already have excellent native dark modes should use their own — CSS inversion on top of native dark mode looks wrong. The per-domain toggle handles this.

What it does: Applies dark mode to literally any website, regardless of whether it supports prefers-color-scheme.

What it doesn't do: Can look slightly off on sites with unusual color palettes or custom fonts in specific colors. This is why the per-domain toggle matters.

Verdict: The only approach that works universally. Use for sites that don't support dark mode; disable for sites with native dark modes.

---

Which Option to Use

Situation	Solution
Most modern sites (GitHub, Twitter, Reddit)	OS dark mode (Option 1)
Keep OS light but want sites dark	about:config ui.systemUsesDarkTheme=1 (Option 3)
Sites that ignore dark mode entirely	CSS inversion extension like NightOwl (Option 4)
Just want Firefox UI dark	Firefox Dark theme (Option 2)

Best combination: Set OS dark mode (Option 1) for sites that support it natively, plus NightOwl (Option 4) with per-domain enable for the stubborn ones.

---

Why Some Sites Ignore Dark Mode

The prefers-color-scheme media query is opt-in. Sites that were built before it was widely supported often have no dark mode implementation. Sites with heavy custom styling (news sites, e-commerce) frequently skip it because testing a second color palette is expensive.

These sites will never respond to the OS dark mode setting or the about:config override. CSS inversion is the only solution that works without waiting for the site developers to add support.