Dark mode has gone from a niche preference to an expected feature. Firefox users have several options for enabling dark mode — from the OS-level setting to browser themes to per-site extensions. This article covers all the approaches, with a focus on extensions that go beyond simple CSS inversion.
OS-Level Dark Mode
The quickest path: enable dark mode at the OS level (macOS System Preferences, Windows Personalization, GNOME/KDE settings). Firefox respects prefers-color-scheme: dark, so sites that support dark mode natively will switch automatically.
Check if a site supports native dark mode: open DevTools Console and type:
window.matchMedia('(prefers-color-scheme: dark)').matches
Should return true when OS dark mode is enabled.
Limitation: this only works for sites that implement prefers-color-scheme. Most major sites do (GitHub, Google, Twitter), but many smaller sites don't.
Firefox Themes
Firefox's built-in theme system covers the browser chrome (toolbar, tabs, sidebar) — not page content. Themes from AMO are downloaded via Add-ons:
For dark browser chrome: Settings → Extensions & Themes → Themes → search "dark" or install the built-in Firefox Dark theme.
This makes the browser interface dark but doesn't affect website content.
Firefox Color Scheme Setting
about:config → ui.systemUsesDarkTheme:
- Set to
0→ Firefox reports light mode to websites - Set to
1→ Firefox reports dark mode to websites (even if OS is in light mode)
This forces prefers-color-scheme: dark to be true for all sites, activating dark themes on sites that support it, without affecting the OS.
NightOwl Extension: Smart Dark Mode
NightOwl is a Firefox extension available on Firefox Add-ons that provides a more intelligent approach to dark mode than CSS inversion:
- Adapts to the site's existing color scheme rather than just inverting all colors
- Faster rendering than CSS filter-based approaches
- Per-site toggles — keep light mode on photography sites or color-sensitive apps
- Scheduled switching (automatic light-to-dark transition at your chosen time)
- Works well on sites with images (images aren't inverted to look negative)
NightOwl's main advantage over generic dark mode solutions: it doesn't invert photos and videos while still making text-heavy pages dark. The difference is visible on news sites and documentation pages.
Dark Reader Extension: The Popular Choice
Dark Reader is the most downloaded dark mode extension on Firefox. It works by:
- Analyzing the page's CSS
- Generating a dark theme that maintains readability
- Applying the theme via CSS variables or style injection
Configuration options:
- Brightness, contrast, sepia adjustments
- Site-specific settings
- Custom CSS per-site
- Schedule switching
Dark Reader is excellent for sites that don't have native dark mode and where you want detailed control. It's heavier than NightOwl (more CPU-intensive on complex pages) but more customizable.
NightOwl vs. Dark Reader: Which to Choose
| Feature | NightOwl | Dark Reader |
|---|---|---|
| Speed | Faster (lighter weight) | Slower (heavier analysis) |
| Image handling | Doesn't invert images | Mode-dependent |
| Customization | Per-site toggles | Deep per-site CSS |
| Scheduled switching | ✓ | ✓ |
| Complex pages | Better compatibility | May cause rendering issues |
| CPU usage | Lower | Higher |
| AMO reviews | ✓ | ✓ |
For most users: if you want a set-and-forget dark mode, NightOwl. If you want deep customization and per-site CSS, Dark Reader.
Dark Mode for Developers
Dark mode matters more for developers who spend all day in the browser:
- Fatigue: dark interfaces are less fatiguing in low-light environments
- Documentation sites: MDN, Stack Overflow, dev.to, and GitHub all have native dark mode or dark theme support
- DevTools: Firefox DevTools has its own dark/light theme setting (DevTools → gear icon → Dark theme) — this is independent of both OS dark mode and site dark mode
Dev-specific recommendation: enable dark mode at OS level + ui.systemUsesDarkTheme = 1 in about:config + NightOwl for sites that don't support prefers-color-scheme. This gives you dark mode with minimal processing overhead.
Scheduling Dark Mode
Both NightOwl and Dark Reader support scheduling. The most practical pattern:
- Light mode during working hours (typically better for focus and color accuracy)
- Dark mode starting at sunset (reduces eye strain as ambient light decreases)
Firefox itself doesn't have a built-in scheduler, but the extension handles it. Set the schedule in the extension's settings to your preferred transition time.
Content Dark Mode via Firefox
Firefox 95+ has a built-in setting to force dark mode on all sites (using CSS color-scheme inversion). Access it:
Settings → Colors → Override the colors specified by the page → Always (set text/background colors)
OR
about:config → browser.display.use_document_colors = false + set your own color preferences.
This is more aggressive than extensions — it forces Firefox's color choices on everything. Good for accessibility, but often breaks site layouts.
Summary: Dark Mode Stack
Most effective combination:
- OS dark mode enabled
-
ui.systemUsesDarkTheme = 1in about:config - NightOwl extension (AMO) for sites without native dark mode support
- Firefox theme set to dark
- DevTools dark theme enabled
Result: fully dark browser on all sites, with minimum CPU overhead and no image inversion.
Top comments (0)