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 not supported in the stable Firefox Fenix builds yet. You will have to use beta or nightly releases. This means you will have to create an add-on collection at Mozilla’s add-on website and load it in your settings. It is not straight-forward, but for dark mode with better performance, it’s worth it.
After the add-on install is completes and activates, navigate to the global stylesheet pages and install one of them. Try them on the sites you frequently visit. This will showcase if the userstyle doesn’t have weird contrasts or glitches.
After you’ve found the style you, you can disable 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.
