Firefox has several ways to get dark mode across all websites. They work differently, have different trade-offs, and not all of them cover the full web. Here is what actually works.
Option 1: Firefox's built-in prefers-color-scheme
Firefox respects the prefers-color-scheme media query. If you set your OS to dark mode, Firefox signals to websites that you prefer dark themes.
The problem: most websites do not implement prefers-color-scheme. It works on GitHub, Twitter, dev.to, a handful of major sites. The rest of the web ignores it.
Result: inconsistent. Some sites dark, most still white.
Option 2: Firefox's built-in reader mode
Reader mode strips away a page's styling and shows it in a clean format with a dark option. But it only works on article-type pages, not web apps or search results.
Result: works for reading articles, nothing else.
Option 3: Custom userChrome.css
You can write CSS that modifies Firefox's UI and, with some work, inject styles into web pages. This requires enabling the browser.chrome.author_level_userchrome.css preference and writing CSS.
Result: possible for experienced users, too complex for most.
Option 4: A dark mode extension like NightOwl
Extensions can apply a dark transformation to every page at the rendering level, without relying on the site to implement anything.
NightOwl applies dark mode automatically to every site you visit. It also auto-schedules by sunset and sunrise for your location — dark mode turns on when the sun sets, off when it rises.
Which to use
- For sites that support it: the OS dark mode preference handles it automatically.
- For everything else: an extension is the only reliable solution.
- NightOwl works on sites that have never added dark mode support.
The scheduling feature is worth calling out: most dark mode extensions require you to toggle manually. NightOwl removes that friction entirely.
NightOwl is one of 11 Firefox extensions I built — all free, no-account, no-server. See the full series for the others.
Top comments (0)