[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.

Advertisement

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:

Dark_Light_Mozilla_Firefox_Themes.png

If you are ready to add these 2 hidden themes in Firefox web browser, just follow these simple steps:

UPDATE: 2 New Themes “Compact Dark” and “Compact Light” Added to Mozilla Firefox

Advertisement

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.

Activate_Light_Developer_Theme_Firefox.png

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

Activate_Dark_Theme_Firefox.png

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.

Enable_Use_Developer_Edition_Theme_Option_Firefox.png

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.

Switch_Dark_Light_Default_Firefox_Themes.png

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.

Use_Developer_Edition_Theme_Option_Firefox_Customize.png

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.

Also Check:

[Dark Theme] Make Mozilla Firefox Look-Like Microsoft Edge Web Browser

Published in: Mozilla Firefox

About the author: Vishal Gupta (also known as VG) has been awarded with Microsoft MVP (Most Valuable Professional) award. He holds Masters degree in Computer Applications (MCA). He has written several tech articles for popular newspapers and magazines and has also appeared in tech shows on various TV channels.

Comments

NOTE: Older comments have been removed to reduce database overhead.

  1. tried the light theme. it looks ok and like my FF Nightly look with square tabs. The dark theme make FF Dev look badass.

  2. I am using 31.6.0 ESR version and dont see this option. In which versions do we get the options mentioned in this article?

  3. A great tip, and a great theme.
    Bonus : the toolbars are a few pixels smaller (useful on laptops).

    Thank you VG πŸ™‚

  4. Thank You VG
    Tips for tweak firefox please how to make firefox not use much memory and CPU without crashing or not responding

  5. I’m using Nightly v. 47 and the value “browser.devedition.theme.enabled” is not available. I tried to add it manually, however that didn’t change anything. Developer options actually show dark and light theme options, but there is no “Use Developer Edition browser theme”. It’s a real shame because it looks awesome. I don’t know why they removed that option.

  6. Shortcut — accidentally changed the theme to light theme with cmd+shift+L
    not sure how to make it go back to Dark Kind of mad.

  7. Oh man you’ve saved me a lot of time, I spent few hours to figure out how to completely disable dark theme. Thanks a lot.

Leave a Comment

Your email address will not be published. Required fields are marked *

NOTE: Your comment may not appear immediately. It'll become visible once we approve it.