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

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:

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





Share this article: Facebook | Twitter | Google+ | Reddit | Tell a friend

Posted in: Mozilla Firefox


Other similar articles that may interest you


Comments

  • I'm in love with the dark theme. Thank u so much. :D

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

  • 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?

  • VG

    ^^ You'll need to use newer versions such as 35.0 or later.

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

    Thank you VG :)

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

  • Seems to be missing in 40 beta 1

  • Seems like this feature has been disabled in Firefox 40.

  • Option was removed by version 40. The first flag in about:config no longer exists.

  • Sadly this option seems to be gone in the version 44

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

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

  • 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

(required)