How I Built NightOwl: A Smart Dark Mode Extension for Firefox
Browser dark mode used to mean hunting through settings, installing heavy extensions that slowed everything down, or just living with eye strain. I built NightOwl because none of the options were right. The Problem With Existing Dark Mode Extensions Most dark mode extensions fall into one of two categories: Too heavy — Some popular dark mode extensions load MB of CSS per page, slow down…
NightOwl is a smart dark mode extension for Firefox that simplifies the process of switching to a dark theme on websites. Tired of dealing with clunky extensions or struggling to find a suitable dark mode, the creator built NightOwl to fill the gaps left by existing solutions. Existing dark mode extensions often suffer from two major issues: they're either too heavy, loading unnecessary CSS and slowing down page rendering, or too basic, inverting colors without considering the impact on images and videos.
NightOwl stands out by applying smart color inversion to background and text colors only, leaving images, videos, and other elements untouched. This approach ensures that photos and other visual elements maintain their original quality. The extension also offers a schedule feature, allowing users to set specific start and end times for dark mode activation, catering to the varying work hours of different individuals.
Furthermore, NightOwl provides a per-site whitelist, enabling users to customize the dark mode experience on individual websites.
The technical implementation of NightOwl involves a combination of CSS injection and DOM manipulation. The core dark mode CSS defines variables for background color, text color, and link color. These variables are then applied to the body element, ensuring consistent application across the page. Smart image handling is achieved by filtering out images, videos, and canvas elements from the inversion process.
The inversion algorithm avoids applying a one-size-fits-all inversion, instead adjusting light backgrounds using HSL manipulation to maintain the visual integrity of images.
Performance is a priority for NightOwl, with optimizations like debounced MutationObserver to handle frequent DOM updates, leveraging CSS variables for cascading changes, and running all DOM manipulation in a requestAnimationFrame callback to prevent layout thrashing. NightOwl is completely free, open-source, and doesn't track user data. The source code is available on Firefox AMO, inviting developers and users alike to explore and contribute to this innovative productivity tool.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
