DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

I built a Firefox dark mode extension that auto-schedules — here's what I learned

The Problem: Late-Night Eye Strain Is a UX Issue Nobody Fixes

You're building something late at night. Every site you visit blasts white at full brightness. You toggle dark mode in your OS settings, reload the browser, and half the sites ignore it anyway.

I've been there. That's why I built NightOwl.

What NightOwl Does Differently

NightOwl is a Firefox extension that does one thing: applies dark mode to every website automatically, on a schedule you set.

What makes it different from just toggling your OS dark mode:

  • Auto-schedules by sunset/sunrise — set it once, dark mode activates at dusk and clears at dawn
  • Custom time windows — prefer "after 10 PM until 7 AM"? Set exact times
  • Per-site overrides — some sites look worse in forced dark mode; whitelist them
  • Works on every site — by injecting a CSS layer before page render, it catches sites that don't respect prefers-color-scheme

Why Not Dark Reader?

Dark Reader is excellent — but it's a 900KB extension with 15+ permissions and a subscription model. NightOwl is ~50KB, no accounts, no remote data, just storage permission. If all you need is reliable scheduled dark mode, NightOwl is the minimal choice.

What I Learned Building This

1. The popup is the whole UX. Dark mode users want fire-and-forget. The popup needs to show current state instantly and toggle in one click. I redesigned it 3 times before this version felt right.

2. Schedule UI is deceptively hard. "Sunset" sounds simple until you realize the browser doesn't expose geolocation to background service workers without explicit user permission. I ended up offering both a sunset/sunrise approximation and manual time entry — most users just want sunset mode.

3. Broad host permissions are unavoidable — and the explanation matters. To inject dark mode CSS before a page renders (so it never flashes white), you need <all_urls> in your manifest. This triggers a scary browser warning. The onboarding copy I landed on: "NightOwl never reads or transmits page content — this permission is needed only to apply dark mode CSS before pages load."

The Extension Is Live

NightOwl is free on Firefox Add-ons: https://addons.mozilla.org/firefox/addon/nightowl1/

It hit 9 weekly downloads this week after launching at zero. If you've ever been annoyed by dark-mode-blind websites at midnight, give it a try.


Building Firefox extensions? I'd love to hear how you handle the host-permissions UX challenge.

Top comments (0)