HomeNEWSUse Firefox Developer Edition dark theme in Firefox

Use Firefox Developer Edition dark theme in Firefox

Mozilla recently released a Developer Edition of Firefox. The main idea was to create a version of Firefox optimized for web development tasks.

It’s separate from other versions of Firefox and Mozilla changed the theme for that version to reflect that. However, it is not the only indicator. You can run the developer version alongside your regular version of Firefox and both will work just fine.

This caused a minor issue with existing Aurora users, as users were moved to a new profile in the process, which meant access to bookmarks, browsing history, and mods weren’t available after the upgrade. (read here how to fix that).

You can see my first look at the Firefox Developer Edition here.

Anyway, the Developer Edition ships with a dark theme enabled by default. Not only is it dark, but it also wears square lashes instead of round ones.

It is also possible to switch to the normal theme in the Developer Edition if you prefer.

If you like the dark theme and are currently using Firefox, you might find it interesting that it is also possible to enable it in all editions of Firefox.

To updateNote: Mozilla appears to have removed that option with the release of Firefox 40. This means that it is no longer possible to enable the dark theme on non-developer editions of Firefox. Interested users can download the theme as a plugin for the web browser, though to add it. The information below is outdated and no longer valid.

Note: Enabling the theme on an existing profile may cause display issues due to previous modifications or old preferences. It is recommended to create a new profile for this. As you can see in the screenshot below, the window’s title bar is not painted black.

firefox developer theme

To enable the dark theme, do the following:

  1. Make sure you’re running Firefox Nightly (type about:support to check). It is not clear if this modification will reach other versions.
  2. Type about:config in the Firefox address bar and hit enter.
  3. Search browser.devedition.theme.enabled.
  4. Double-click the entry to set it to true.
  5. Once done, tap the F12 key to open the Firefox developer tools.
  6. Click the Toolbox Options icon in the upper right corner.
  7. Look for Themes on the screen and switch from the Light theme to the Dark theme.

You should immediately notice that tabs and other interface elements are painted dark to reflect the change.

To undo the change, simply set the browser.devedition.theme.enabled preference to false again in about:config.

Plugins can also interfere with the theme. If you have installed a plugin that modifies UI elements, Classic Theme Restorer comes to mind, then you may notice display issues when switching to dark theme. (via)

Must Read