Dark mode has become a mainstream expectation — most apps support it, most operating systems default to it or offer it prominently. Firefox has several layers of dark mode support, and understanding how they interact makes a difference in how consistent the experience is.
Layer 1: OS-Level Dark Mode
When you enable dark mode in Windows or macOS, Firefox respects it for its own UI: the toolbar, tabs, and settings panels go dark automatically.
This doesn't affect web pages by default — most websites have their own light/dark mode implementation that's separate from the OS setting.
Layer 2: Website Dark Mode (prefers-color-scheme)
Well-implemented websites check the prefers-color-scheme CSS media query and serve a dark-mode version when it's set to dark. This is the "right" way websites handle dark mode.
You can test whether a site supports this via Firefox DevTools: Responsive Design Mode → Sun/Moon icon to simulate light or dark preference.
Sites that don't implement prefers-color-scheme will always appear in their default (usually light) theme.
Layer 3: Firefox's Built-In Override
Firefox has a setting (Settings → Colors section) to force dark backgrounds on websites that don't support prefers-color-scheme. This uses Firefox's own CSS to apply a dark background to all pages.
This is hit-or-miss — some sites look fine, others have broken contrast or unreadable text because the override can't predict what colors a site uses.
Layer 4: Dark Mode Extensions
For consistent dark mode across all websites, a content-script extension is the reliable approach.
Dark Reader is the most popular. It analyzes each page and applies a dark theme based on the site's existing color palette. Results are generally good. It has CPU/memory overhead because it runs analysis on every page.
NightOwl (Firefox AMO) takes a different approach — it injects a CSS filter across all pages rather than doing per-page color analysis. It's lighter-weight but produces more uniform (less site-adapted) results. Good for people who want dark mode everywhere without configuration.
Layer 5: New Tab Extensions
New tab replacements like Weather & Clock Dashboard have their own dark/light mode toggle, independent of both the OS setting and web page dark mode. Since new tab is an extension page (not a regular web page), regular dark mode extensions don't apply to it.
Weather & Clock Dashboard's toggle is in the top corner of the new tab. It remembers your preference across sessions.
The Recommended Setup
For the most consistent dark mode experience:
- Enable OS dark mode
- Install Dark Reader or NightOwl for sites that don't support
prefers-color-scheme - Set your new tab extension to dark mode manually
This covers:
- Firefox UI ✅
- Modern sites that support the media query ✅
- Older/unconfigured sites (via extension) ✅
- New tab page ✅
The only gaps are PDFs (Firefox's built-in PDF viewer doesn't respect dark mode) and about: pages (Firefox internal pages have their own dark mode separate from all of this).
Top comments (0)