Firefox Dark Mode: The Complete Setup Guide for UI and Websites

Dark mode in Firefox is a two-layer concept: the browser UI itself, and the websites you visit. Configuring both correctly gives you a consistent dark experience that's comfortable for night browsing or low-light environments.

Layer 1: Firefox Browser UI (Dark Theme)

The Firefox browser chrome (toolbars, tabs, sidebar) can be set to dark mode independently of the websites you visit.

Settings → General → Language and Appearance → Themes → Dark

Or install a theme from AMO: Firefox Themes — there are hundreds of dark themes ranging from pure black to colorful dark variants.

Once set, the browser toolbar, tab bar, and address bar are dark. This is independent of what websites show.

Layer 2: Website Dark Mode

Websites can be dark if:

1. The site supports prefers-color-scheme: dark media query (your OS/browser preference is detected)
2. You force dark mode via an extension

Using system preference: Firefox respects your OS dark mode setting. On Windows: Settings → Personalization → Colors → Dark. On macOS: System Settings → Appearance → Dark. Firefox will pass this preference to websites that support it.

Forcing dark mode on all sites: The Dark Reader extension is the standard approach.

Dark Reader Extension

Dark Reader applies a dark theme to any website, including ones that don't natively support dark mode.

It inverts and adjusts colors intelligently (not just a raw inversion, which would make photos look wrong). You can:

• Adjust brightness, contrast, and sepia level
• Set per-site exceptions (sites where you prefer light mode)
• Use automatic mode (follows system preference) or force dark always

Dark Reader is one of the most installed Firefox extensions. It works well on most sites; occasional issues on sites with unusual CSS.

New Tab Page Dark Mode

Your new tab page is a separate concern from site dark mode. Each new tab extension handles this independently.

Weather & Clock Dashboard has a built-in dark/light mode toggle. Opening the settings → toggle between dark and light. The dark mode is a true dark theme (dark background with appropriate contrast), not just an inversion.

If you have Dark Reader set to "all sites," the new tab page will be affected by it. You may want to add the new tab URL to Dark Reader's "not inverted sites" list if you prefer the extension's native dark mode.

about:config for Forced Dark Mode (No Extensions)

Firefox has an experimental built-in forced dark mode for websites. In about:config:

• Set layout.css.prefers-color-scheme.content-override to 0 to force dark mode for all websites

This applies the dark mode preference to all sites globally without needing Dark Reader. It's less sophisticated than Dark Reader (no per-site control, no brightness/contrast tuning) but is zero-extension-overhead.

The Complete Dark Mode Setup

1. Set Firefox theme to Dark: Settings → Themes → Dark
2. Set OS to dark mode (applies to sites with prefers-color-scheme support)
3. Install Dark Reader for sites that don't have native dark mode
4. Set your new tab extension to dark mode (if applicable)
5. Optional: add about:config forced preference for completeness

After this, everything you see in Firefox should be dark: the browser UI, most websites, and your new tab page.