How to Enable Firefox Dark Mode on Ubuntu

Dark Themes, dark modes, and dark colors are getting popular nowadays among many computer users due to their tremendous amount of advantages. Traditionally, the monitor, and many other applications use white, bright colors with high contrast for attracting the masses and keeping them focused to the content on the screen. However, according to many individuals it hurts eyes when being in front of bright/white colors for a while. This is why many hard-core computer users are suffering from various eye problems.The major reason for this issue is blue light that is a part of the white color. Blue light has highest amount of energy level in visible spectrum, whereas orange, yellow, red colors have lowest energy level. Black color doesn’t emit any light, and therefore it has little to no energy. Having low energy in the light makes it easy for people to work on the computer in the long run. So, this guide demonstrates how to enable dark mode in Firefox.

Solution 1: Using a Theme from Mozilla Repository

Dark Mode can be enable on Firefox with Themes. Themes are a skin that dresses up the Firefox interface and its elements to give it an elegant look. Mozilla has their own repository that deploys themes, extensions to extend the functionality, and the look of the browser. It’s quite safe as they are regularly tested by staff members of Mozilla, and also easy to be installed via the browser. The following tutorial demonstrates what are some of Dark Mode themes, and how to enable them with ease.

Assuming Firefox is already installed in the System, launch it via the task bar as seen in the following screenshot
Click on the three horizontal lines button to open the menu bar of Firefox, then locate “Add-ons” and click to open add-ons menu.
Navigate to “Appearance” tab.Click on “Appearance” tab located on the left-side panel.It’s also possible to access here by typing the following command in the address bar of Firefox as seen in the following screenshot.about:addons
By default, Firefox has a Dark Mode theme installed in the Appearance tab, but it’s disabled at the outset. So, click to enable it to activate the Dark Mode.
A theme can be enable by clicking on the “Enable” button located in the same row as Theme’s name and its description.

Dark Mode (Web Extension)

Dark Mode (Web Extension) is an excellent dark mode extension developed for Mozilla browser due to the growing demand for dark User interfaces (UI). Unlike other themes, this is an extension; hence as per requirements the theme can be enabled/disabled with a single click without ever visiting the addons section.

Navigate to the following web URL.

https://addons.mozilla.org/en-US/firefox/addon/dark-mode-webextension/

Install the extension just as any other extension
Click on the three horizontal lines button to open the menu bar of Firefox, then locate “Add-ons” and click to open add-ons menu.
Navigate to the “Extensions” section of Firefox Browser to find the “Dark Mode” extension.
Click on “Enable” button to turn it on
On the Toolbar, locate the orange switch, then click on to turn on Dark Mode. Click again to disable the dark mode. Please note that, this makes the whole website darker not just the interface. If it’s not what it’s being sought, use one of the later stated themes instead of this one.

Dark

Unlike the previous option, this is a theme, but it can be used to enable the Dark Mode as well. The special thing of this theme is, it only darkens the UI and its elements instead of the whole browser (which includes the web pages as well). Darkening the web pages might be a deal breaker for some people as it hinders the browsing experience on certain websites. Use this theme instead of the previous extension if it’s not needed to darken the web pages.

Navigate to the following web URL to download the theme

https://addons.mozilla.org/en-US/firefox/addon/dark/

Click on the install button on it to install the theme in Firefox browser
Navigate to the “Appearance” section on FireFox to locate the “Dark” theme.
Click on “Enable” button to turn it on as seen in the following screenshot.

Solution 2: Using a Theme from GitHub

GitHub has a number of open-source themes/extensions for Firefox that are not available in Mozilla repository. Being an opensource repository makes it secure as much as Mozilla ones; hence there is nothing to worry about downloading from here. However, it’s not easy to install Themes/extensions from here as they have to be compiled prior to install; hence a number of steps are involved in this segment.

Open the Terminal window and type the following commands on there. The first line installs the GIT package that helps in cloning files from git to the local system, second one installs some important packages that are required in generating the theme files, third line actually downloads the arc-firefox-theme’s files to local side, and changes the directory to that particular folder, fourth line executes the shell commands, and finally generate the theme file.
install git
sudo apt-get install autoconf automake pkg-config
git clone https://github.com/horst3180/arc-firefox-theme && cd arc-firefox-theme
./autogen.sh –prefix=/usr
make mkxpi
Navigate to “arc-firefox-theme” folder in Home folder, and locate the following highlited theme files. Each file represents an unique theme that can be installed by clicking on individual files.

arc-darker-firefox-theme-53.20170420.xpi Theme

This theme only darkens the tabs, but the toolbar is colored with smoke white making it still pleasant for eyes.

arc-dark-firefox-theme-53.20170420.xpi Theme

This theme is an excellent choice for those who seek complete darkness over their UI elements.

The last file doesn’t the darken the FireFox UI, but still it produces pleasant colors to reduce eye strain.

Conclusion

There are a number of ways to enable Dark Mode in Firefox on Ubuntu, and other Linux distros. The default way is using the “compact dark” theme developed by Mozilla themselves, which comes by default with Firefox at the outset. It has basic features required to color the Firefox with a shadow. However, there are number of other options available in Mozilla official repository such as “Dark”, “Dark Mode (web extensions)”. Not only the themes, but also extensions can also be used to enable the Dark Mode in Firefox, and it’s proven with “Dark Mode” extension. The advantage of using an extension is, it has various actions, and thus the Dark mode can be enabled depending on user preference instead of being enabled in the whole time until it’s changed via “addons” section.

Apart from the Mozilla’s official repository, there are a number of third party websites from where themes/extensions can be downloaded, such as GitHub. However, sites like GitHub doesn’t provide a compiled extension, and thus they have to be manually compiled. This can be problematic for non-technical users, and also there is no way to receive automatic updates with this way. All in all, enabling Dark Mode in Firefox is not a difficult task, and there are a number of ways to do it. Dark Mode has a lot of benefits such as keep the eye strain low, reduce the power consumption on laptops and give a pleasant user experience on computer without compromising the health.