DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

Dark Mode New Tab for Firefox: What to Look For

Dark mode for browsers is table stakes now — every browser offers it. The question is what happens to your new tab page when you switch.

Firefox's default new tab page respects dark mode. But custom extensions don't always. I've run into new tab extensions that look fine in light mode but are blinding at night when the rest of the system is dark.

The Problem With New Tab Extensions and Dark Mode

Browser extensions can get dark mode in a few ways:

  1. System preference detection — The extension checks prefers-color-scheme: dark and applies a dark theme automatically
  2. Manual toggle — The user can switch dark/light mode inside the extension's settings
  3. Neither — The extension is light-only and you're stuck

Weather & Clock Dashboard handles this with both options: it auto-detects system preference and also has a manual toggle if you want to override.

Why This Matters

If you use Firefox in dark mode — either via Firefox's theme settings or OS-level dark mode — your new tab page should match. A bright white new tab interrupting a session of dark-mode browsing is visually jarring enough to make you switch to a different extension.

How Dark Mode Works in Weather & Clock Dashboard

The extension uses CSS custom properties that switch between two sets of values based on system preference. When your OS is in dark mode, the new tab shows dark backgrounds and light text. When your OS is in light mode, the colors invert.

The manual toggle (sun/moon icon on the new tab) lets you override this if you want light mode on a dark-mode system or vice versa.

What It Looks Like

Dark mode:

  • Background: near-black (#121212 range)
  • Text: light gray / white
  • Weather icons: appropriate contrast

Light mode:

  • Background: white/light gray
  • Text: dark
  • Same layout, different palette

The extension doesn't try to be a dark-mode enhancement — it just looks right in whichever mode you're using.

Firefox Dark Mode Options (Beyond Extensions)

If you're not using a dark mode new tab extension but want dark mode, Firefox has several options:

Firefox themes — Firefox supports dark themes through the browser's built-in theming. Settings → More Colors, or install a theme from AMO. These affect the browser chrome but not the new tab content.

Dark mode add-ons — Extensions like Dark Reader apply dark mode sitewide including the new tab, but they process every page, which can slow rendering.

OS dark mode — Setting your OS to dark mode makes Firefox's default new tab respect it natively.

New tab extension — The cleanest approach for dark new tabs specifically, since the extension controls the new tab page entirely.

Installing

Weather & Clock Dashboard is available free at addons.mozilla.org/en-US/firefox/addon/weather-clock-dashboard/.

It supports dark/light mode with system detection, includes weather and world clocks, and doesn't require an account.

Top comments (0)