DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

I Built a Firefox Dark Mode Extension That Auto-Schedules Itself — Here's What I Learned About Eye Strain and UX

Late at night, the browser is often the brightest thing in the room.

I noticed this a few years ago when I was deep in a side project, burning hours after midnight. Every time I switched between a dark IDE and a white-background news article or docs page, my eyes strained. I'd squint, blink, then remember — I should turn on dark mode. Then I'd forget again the next night.

The manual toggle problem is real. And more annoying than it sounds.

The Problem: Eye Strain Lives in the Gaps

Dark mode is well-understood as a benefit for evening use. The research on blue light and melatonin suppression is broad. But the friction of remembering to switch modes is surprisingly high.

On my phone, iOS Night Shift handles this automatically — dark between sunset and sunrise, light otherwise. On the desktop, macOS and Windows both offer scheduled dark mode at the OS level.

But in Firefox? Nothing. Your browser stays in whatever mode you last set it, regardless of time of day.

Most people address this with extensions like Dark Reader — and it's a great tool. But Dark Reader is a full page-rewriting engine. It inverts and reprocesses every page to apply dark colors. It's powerful, but it can break layouts, slow down rendering on complex sites, and adds significant overhead.

What I wanted was simpler: schedule Firefox's native dark mode. No page rewriting. Just tell Firefox "be dark after sunset."

What I Built: NightOwl

NightOwl is a Firefox extension that does exactly one thing: it automatically toggles Firefox's dark/light mode based on time of day or local sunset.

You set it once. You forget it exists. It just works.

How it works:

  • You set a schedule (e.g., dark from 8pm to 7am, or dark after local sunset)
  • NightOwl watches the clock and flips the browser theme at the right time
  • No page modification — it uses Firefox's native theme API
  • No background telemetry, no accounts, no tracking

The result is that Firefox follows the same rhythm as your OS dark mode, without you having to remember to toggle anything.

Why Native Mode Matters for Accessibility

This is where the UX lesson got interesting during development.

When I first thought about this, I assumed the main benefit was aesthetic — dark mode looks nice at night. But digging into it, the real accessibility argument is stronger:

  1. Photosensitive users benefit from consistent brightness levels across their entire screen, not just their apps
  2. Evening readability is genuinely better when contrast ratios shift to dark-on-light versus light-on-dark for ambient environments
  3. Cognitive load — remembering to switch modes is low-cost individually but adds up across weeks of late-night sessions

Scheduling this automatically removes a friction point for users who need it most and benefits users who never think about it.

The Dark Reader vs. NightOwl Question

I want to be honest here: Dark Reader is excellent. If you want dark colors on specific websites regardless of time of day — use Dark Reader. It's the right tool for that job.

NightOwl's approach is different. It targets Firefox's system-level dark mode preference, which tells websites "the user prefers dark mode." Well-coded sites with proper prefers-color-scheme CSS will respond to this automatically, without any page rewriting.

So the tradeoff:

  • Dark Reader: Works on more sites, including old ones without dark mode CSS. More invasive.
  • NightOwl: Only affects sites that natively support prefers-color-scheme. Zero overhead, zero page modification.

For modern browsing in 2024-2025, most major sites (GitHub, MDN, Reddit, YouTube, etc.) respect prefers-color-scheme. NightOwl handles them all cleanly.

What I Learned Building It

A few things surprised me:

Browser theme APIs are limited but honest. Firefox's theme API lets you set complete visual themes programmatically, which means NightOwl can flip from a "light" theme profile to a "dark" one instantly, with no visible flicker.

Sunset timing is surprisingly complex. Getting accurate local sunset times without sending location data to a server required implementing a local solar position algorithm. The math for calculating solar declination, hour angle, and sunset azimuth is well-established (see SunCalc library) but required careful edge case handling for polar regions and DST transitions.

"Set it and forget it" is harder than it sounds. The most important UX goal was that users should never have to interact with the extension again after initial setup. That meant: no notifications, no prompts, no updates that reset settings. An extension that nags you has failed at its core job.

The Result

NightOwl is free, open-source (MIT), and lives on the Firefox Add-ons page:

Install NightOwl on Firefox →

It's had a quiet few weeks since launch, but this week downloads jumped — which I'm taking as a signal that the "auto-schedule dark mode" need is real and people are finding it.

If you're a Firefox user who browses late at night and finds yourself reaching for the dark mode toggle, give it a try. Set it once, and your browser will follow the sun from then on.


Have questions about how the extension works, or ideas for features? Drop a comment — happy to dig into the implementation details.

Top comments (0)