DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

I Built a Firefox Dark Mode Extension That Schedules Itself by Sunset — Here's Why

The problem with dark mode extensions is that you have to remember to turn them on.

By evening, you're staring at a bright white screen. You remember to toggle dark mode. Then you close the laptop. In the morning, you're in dark mode when you don't need it.

I got tired of this cycle. So I built NightOwl — a Firefox extension that automatically schedules dark mode based on your local sunset time.

How it works

NightOwl uses the browser's Geolocation API to determine where you are, then calculates the local sunset time. When the sun goes down, dark mode turns on. When the sun rises, it turns off.

No API keys. No accounts. It works offline. Your location data stays on your device.

You can also set a custom schedule — if you prefer dark mode from 9pm to 7am regardless of sunset, that works too.

Why "invert filter" instead of a real dark mode API

The current version uses CSS invert(1) hue-rotate(180deg) — the classic "force dark mode" technique. This works on every website, including ones that ignore your system dark mode setting.

Is it perfect? No. Some images look inverted. Some websites already have proper dark themes that look weird inverted.

Firefox 157+ added a prefers-color-scheme override via devtools that handles this more elegantly — but that only affects sites that have implemented proper dark themes. NightOwl catches everything else.

What I'd build differently

If I built this today, I'd use the Firefox browserSettings.overrideContentColorScheme API to toggle dark mode at the browser level, then fall back to the invert filter for sites that don't respond. I might ship that in a future version.

The extension

Free and open source:

Current stats: ADU=4, growing since launch 2 weeks ago.

If you use dark mode and have opinions on the "force dark vs. CSS dark mode" debate, I'd love to hear your take in the comments.

Top comments (0)