DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

Firefox Night Mode Extension: How to Get Dark Mode on Every Website

#firefox #browser #javascript #webextensions

Night mode, dark mode, dark theme — browsers do not distinguish between these terms, but users search for them differently. Here is a practical guide to getting any form of dark mode working in Firefox.

What "dark mode" actually means in a browser context

There are three layers where dark mode can apply in Firefox:

1. Browser chrome (toolbars, menus, address bar): controlled by Firefox's theme setting. Set in Preferences → General → Language and Appearance. Can be set to dark, light, or auto (follows OS).

2. Browser UI (the content area of built-in pages like about:newtab): controlled by Firefox's color scheme. If you set Firefox to dark theme, internal pages go dark.

3. Websites: this is the hard one. Sites have their own CSS. Firefox's dark theme does not affect them. Each site needs to either support prefers-color-scheme: dark natively, or be transformed by an extension.

Getting night mode on websites

The only reliable way to get dark/night mode on all websites is a browser extension that applies a CSS transformation.

The two main approaches:

Dark Reader: the most popular. 3M+ users. Multiple dark mode algorithms. Per-site fine-tuning. Cloud-based option for brightness/contrast adjustments.

NightOwl: auto-schedules by sunset and sunrise. Simpler interface. No manual toggle needed once configured.

The key difference: Dark Reader requires you to toggle it. NightOwl turns on when the sun sets and off when it rises, based on your geographic location.

NightOwl — Firefox Add-ons

Enabling prefers-color-scheme without an extension

For sites that support it, you can trigger dark mode without an extension by:

  1. Setting your OS to dark mode (macOS: Appearance → Dark; Windows: Settings → Personalization → Colors → Dark)
  2. Firefox will then report prefers-color-scheme: dark to websites

This works on sites that have implemented dark mode support. For sites that have not (which is most of the web), you still need an extension.

Which to use

  • For complete dark mode on every website: NightOwl or Dark Reader
  • For automatic scheduling without manual toggling: NightOwl specifically
  • For fine-grained per-site control: Dark Reader

NightOwl is one of 11 Firefox extensions I built — see the full series.

Top comments (0)