Dark mode has become a standard browser feature, but how it actually works, what sites support it, and how to get consistent dark experience across the whole web isn't well understood. Here's a practical guide.

How Dark Mode Propagates from Browser to Websites

The browser doesn't just "dark mode" websites. What it does is set the CSS media query prefers-color-scheme to dark. Sites that check this media query and have a dark color scheme defined will switch to it automatically. Sites that don't support the media query remain their default (usually light) appearance.

To set it in Firefox: Settings → General → Language and Appearance → Website Appearance → Dark. This sets the preference; the browser applies it to all sites that support it.

What doesn't switch: Any site that hasn't implemented prefers-color-scheme support. This is the majority of sites on the web. Major platforms (Twitter, GitHub, Reddit, Gmail, most Google products) support it. Smaller sites, older sites, and many corporate web apps don't.

Firefox UI Dark Mode

The browser UI itself (tabs, address bar, settings panels) has its own theme separate from website dark mode. To darken the Firefox UI:

  • Settings → General → Language and Appearance → Firefox's themes panel
  • Or install a dark theme from addons.mozilla.org/themes (many options, most free)

Firefox's built-in "Dark" theme darkens the browser chrome. Pairing the dark theme with the Website Appearance → Dark setting gives you dark browser UI + dark websites where supported.

Forcing Dark Mode on All Websites

For sites that don't support prefers-color-scheme, there are two approaches:

Browser-level force dark (experimental): In about:config, search for layout.css.prefers-color-scheme.content-override. Setting this to 0 forces dark on all sites. This is a blunt instrument — it inverts colors rather than applying a designed dark theme, so images and carefully designed UI can look wrong.

Dark mode extension: Extensions like "Dark Reader" apply intelligent dark mode transformations to any website. Dark Reader analyzes the page and generates a dark version, handling colors, images, and contrast appropriately. It's significantly more polished than the browser-level force dark. Dark Reader is the standard solution for comprehensive dark mode coverage.

Dark Reader vs Native Dark Mode

Native dark mode (via prefers-color-scheme):

  • Site's intended dark design — proper contrast ratios, intended color palette
  • No extension overhead
  • Only works where the site has implemented it

Dark Reader forced dark:

  • Works everywhere
  • Slight performance overhead (transforms every page)
  • Some pages look wrong despite the smart algorithm — particularly sites with complex layouts, PDFs, media-heavy pages

Best setup for most users: Enable native dark mode in Firefox settings, and also use Dark Reader for the remaining light sites. Dark Reader can be set to only apply to sites that don't have native dark mode (turn off for sites that handle it themselves).

OLED and Energy Considerations

For users on OLED displays (many modern laptops, all phones), true black (#000000) backgrounds turn off those pixels entirely, reducing power consumption and improving perceived contrast. Dark mode generally uses near-black backgrounds, not pure black, but on OLED displays there's still a meaningful energy benefit from dark interfaces compared to bright white backgrounds.

This is a reason to use dark mode on a laptop for battery reasons, not just comfort.

Eye Strain: What the Research Says

The research on dark mode and eye strain is more nuanced than the marketing suggests:

  • In low-light environments, dark mode reduces glare and is generally easier on the eyes
  • In bright environments (daytime office, outdoor), dark text on light background has better contrast and is easier to read
  • For users with certain types of astigmatism, light mode can be easier to read in some conditions

The practical takeaway: dark mode is better for evening use and comfortable for many users all day. If you find you're straining to read in dark mode, switching to a medium-contrast gray theme (not full white, not full black) may be more comfortable.

New Tab Dark Mode

The new tab page has its own styling. With a dark Firefox theme, the default new tab may still have a light background depending on your configuration.

Weather & Clock Dashboard for Firefox has a dark interface by default — dark background with light text for the time, weather, and world clocks. This matches a dark browser theme and dark website setting, giving a visually consistent experience when opening a new tab.

Firefox for Android Dark Mode

On Android, Firefox respects the system dark mode setting. Set your Android system to dark mode → Firefox UI and supported websites both switch to dark. The behavior is the same as desktop Firefox following the OS setting.

Per-Site Dark Mode Exceptions

If a specific site looks bad in dark mode (via Dark Reader or force dark), you can whitelist it. Dark Reader has a per-site disable button. For native dark mode, you can't override a specific site's dark implementation without developer tools.

Sites that have known dark mode issues and may warrant whitelisting: Google Maps (dark map themes can reduce readability), some banking sites with strict security styling, medical imaging tools, and anything where accurate color rendering matters (photo editing apps, color pickers).

Summary

The simplest setup: Settings → Website Appearance → Dark + a dark Firefox theme + Dark Reader extension. This gives you dark UI, dark sites where native support exists, and intelligent forced dark on everything else. Toggle Dark Reader off for specific sites where it looks wrong.