Dark Reader add-on for Firefox which converts bright web pages to darker colors which are easier to read in low-light conditions. For me, its more convenient as I see a number eye floaters on a bright white screen. As beautiful as the Dark mode add-on makes the websites look, it does have a performance hit on loading web pages and Firefox overall. On mobile, this is more noticeable as we switch apps more. We are going to look at some ways we can reduce the performance degradation.
Lighter theme engine in Dark Reader itself
The Easiest way to gain performance is to choose the static or filter modes of Dark Reader. These modes take less analysis and processing, making websites dark quicker. Static is the most performant theme engine, however the engine just reverts the colors and that may look weird on some dynamic web pages. You’ll have better universal dark theme with Filter+ with reduced performance hit than dynamic, which analyses color and images found in a web page.
Stylus – A lighter add-on
If you think the Dark Reader add-on itself is resource heavy on mobile, then there are other alternatives. A lighter add-on called Stylish is a user styles manager. Stylus is a lighter fork of Stylish, which last updated on July 25, 2018. The main purpose of the app is to load custom stylesheets for websites, and it supports global stylesheets for all website. It is light on resources and customizable to some extent. Stylus doesn’t analyze or dynamically update the website, however its global stylesheets are effective in most websites. It is better compared with Chrome’s dark mode. You don’t have control over the toggle with Chrome’s dark mode, but with Stylus you can. You can even have multiple active stylesheets and disable stylesheets on specific websites and URLs. There are 2 nice global dark themes which I found to work beautiful with most of the websites we’ve come across.
One is the midnight surfing style, and the other is global dark style. Personally, Midnight is my favorite as global dark style adds a background to all pages.
Note: All features of Stylus are not fully working on Firefox mobile. The user styles load but you can not edit them on mobile yet. Anything else doesn’t work, do let us know.
Usage:
Stylus add-on is now supported in the stable Firefox Fenix builds. Previously you needed to use beta or nightly releases and create an add-on collection at Mozilla’s add-on website and load it in your settings. Now you can directly install it from the Firefox addon website.
After the add-on install completes, activate it, and navigate to the global stylesheet pages (midnight surfing style or global dark style) and install one of them. Try them on the sites you frequently visit. This will let you check if the userstyle doesn’t have weird contrast or glitches.
After you’ve found the style you like, you can disable and remove the other. Or you can keep them both and activate the one that fits for a website from user styles three dot-menu in the Stylus setting.
