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.…
Dark mode extensions often require users to manually enable them. By night, bright screens can strain the eyes. Users often toggle dark mode on, only to have it turned off when not needed in the morning. This cycle prompted the creation of NightOwl, a Firefox extension that automatically schedules dark mode based on a user's local sunset time.
The extension employs the browser's Geolocation API to ascertain the user's location, then determines the local sunset time. When sunset occurs, NightOwl activates dark mode; conversely, sunrise prompts the extension to deactivate it. The process is API key-free, account-free, and functions offline, preserving user location data on their device.
Users have the option to establish a custom schedule if they prefer dark mode from 9pm to 7am, irrespective of sunset. The current iteration utilizes CSS invert(1) hue-rotate(180deg) — the customary force dark mode technique. This approach works across all websites, including those that disregard system dark mode settings. However, it's not flawless; certain images may appear inverted, and some websites already possess proper dark themes that look odd when inverted.
Firefox 157 and later introduced a prefers-color-scheme override via devtools, which handles this more effectively, but only for sites with implemented proper dark themes. NightOwl handles the rest. Had I built this now, I would utilize the browserSettings.overrideContentColorScheme API to toggle dark mode at the browser level, then revert to the invert filter for non-responsive sites in a future version.
NightOwl is free and open-source, available on Firefox AMO and soon on GitHub. Its current user base stands at 4 out of 5, having grown since its launch two weeks ago. Feedback on the force dark versus CSS dark mode debate is welcome in the comments section.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.