[Tip] Enable Hidden Secret Dark and Light Themes in Mozilla Firefox

This tutorial will help you in enabling and activating 2 hidden secret themes in Mozilla Firefox web browser:

• Dark theme
• Light theme

People who love minimal user interface, will definitely enjoy the Light theme and people who prefer dark or black themes, will find the Dark theme of Firefox awesome.
Both of these themes are built-in and come preinstalled with Mozilla Firefox newer versions. So we are
not going to install any 3rd party theme or add-on. We are just going to use a simple way to activate these hidden themes.
Yesterday night I found these themes already enabled in Themes section of latest Nightly build and a little bit investigation in about:config page helped me in bringing these themes to stable version of Firefox.
Actually these themes are a part of Mozilla Firefox Developer Edition. Its a new version of Firefox similar to Beta, Aurora and Nightly. Developer Edition has been specifically created for web developers to develop and test apps, websites, etc quickly and easily using Firefox.
Developer Edition of Firefox comes with these 2 themes already enabled but Mozilla has disabled these themes in other versions of Firefox. So we are going to enable the themes again in Firefox web browser.
Before starting the tutorial, lets take a look at both these themes in action:

If you are ready to add these 2 hidden themes in Firefox web browser, just follow these simple steps:
1. We'll need to use Firefox advanced configuration tool "about:config" to enable these themes. So open Firefox and type about:config in addressbar and press Enter. It'll open the configuration editor.
2. Now type theme in Search filter box and it'll show a few results in the window.
3. Double-click on browser.devedition.theme.enabled preference and it'll change its value to true.

It'll immediately activate the Light theme in Firefox.
4. Now if you want to activate Dark theme, double-click on devtools.theme preference and change its value to dark

It'll immediately change Firefox theme to Dark developer edition theme.
So you can switch between Dark and Light themes by changing value of devtools.theme to dark or light respectively.
5. If you want to deactivate or disable Dark and Light developer edition themes, again double-click on browser.devedition.theme.enabled to change its value to false and it'll apply default Firefox theme.
PS: If you restore Firefox customization settings using Firefox Menu button -> Customize -> Restore Defaults option, it'll also restore default Firefox theme.

BONUS TIP:

If you want to switch between Dark, Light and default Firefox theme frequently and don't want to use about:config page every time you want to make the switch, here is a way to make the task easier.
Following steps will add a new option in Firefox Developer Tools (F12) to enable or disable Dark and Light themes in Firefox. So you'll need to just check or uncheck the option to switch between developer edition themes and default Firefox theme. With the help of Developer Tools (F12) you'll also be able to switch between Dark and Light themes instantly.
So just follow these steps to add the direct option to activate developer edition themes in Firefox:
1. Open about:config again and type theme in Search filter box.
2. Double-click on browser.devedition.theme.showCustomizeButton preference and it'll change its value to true.

3. Now press F12 key and it'll show Developer Tools toolbar at bottom.
4. Click on Settings icon (gear icon) in Developer Tools toolbar and you'll see a new option "Use Developer Edition browser theme".
5. Enable the option and it'll immediately apply Light developer edition theme in Firefox window.

6. You can also switch between Dark and Light themes using the radio buttons given there.
Now its turn of another bonus tip!
As soon as you enable "Use Developer Edition browser theme" option in Developer Tools (F12), it automatically adds a new button "Use Developer Edition Theme" in toolbar customization window.

So you don't need to launch Developer Tools every time you want to switch between Developer Edition themes and default Firefox theme, just right-click on Firefox titlebar and select Customize option and there you can change between Developer Edition theme or default Firefox theme using the new button.
To change between Dark and Light theme, you'll still need to use either Developer Tools (F12) window or about:config method as mentioned above.
NOTE: There are some people who use Mozilla Firefox Developer Edition and want to get rid of built-in Dark/Light themes. They can use the reverse of this tutorial to disable Dark/Light themes and enable default Firefox theme.

Share