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

Firefox offers several ways to enable dark mode, but each approach affects different elements of the browsing experience. Here's a breakdown of the four main options and their respective benefits and limitations:

**Option 1: OS System Dark Mode**

Adjusting your operating system's dark mode settings (macOS, Windows, or Linux) triggers the CSS media query `prefers-color-scheme: dark` for websites that support it. This works well for modern websites like GitHub, Twitter, and Slack that have implemented dark mode properly. However, it has no effect on websites that don't implement dark mode at all, or those with inconsistent implementations.

**Option 2: Firefox's Built-In Dark Theme**

Enabling Firefox's dark theme through the settings (Themes > Dark) changes only the browser's user interface (UI), such as the tab bar and toolbar. This option is purely cosmetic and does not affect website content. It's a nice aesthetic choice but won't help with dark mode on websites.

**Option 3: About:config Force Override**

By accessing about:config and setting the `ui.systemUsesDarkTheme` preference to 1, you can force Firefox to report that the system theme is dark, even if the actual OS setting is light. This approach makes Firefox report the dark media query for all websites it encounters. However, this only works on sites that check the `prefers-color-scheme` CSS media query. Sites that don't implement this feature won't be affected.

**Option 4: CSS Inversion Extension (NightOwl)**

For websites that don't support dark mode through CSS media queries, a browser extension like NightOwl provides a solution. NightOwl uses CSS transformations like `invert()` and `hue-rotate()` to flip colors on any page, making images appear correctly while turning backgrounds dark. This option works universally, applying dark mode to literally any website, regardless of whether it supports prefers-color-scheme.

However, it might look slightly off on sites with unusual color palettes or custom fonts, so using per-domain toggles can help by enabling or disabling the extension per site.

**Best Approach**

For the best experience, it's recommended to enable OS dark mode for websites that support it natively (Option 1). For stubborn sites that ignore dark mode, the CSS inversion extension (Option 4) with per-domain toggles is the only solution that works universally. Firefox's built-in dark theme (Option 2) provides an aesthetic option for the browser UI, while the about:config override (Option 3) is useful if you prefer sites to use their dark modes but want to keep your OS in light mode (or vice versa).