_ap_ufes{"success":true,"siteUrl":"www.jucktion.com/tech","urls":{"Home":"https://www.jucktion.com/tech","Category":"https://www.jucktion.com/tech/c/mobile/android/","Archive":"https://www.jucktion.com/tech/2018/01/","Post":"https://www.jucktion.com/tech/incoming-remote-desktop-windows-home/","Page":"https://www.jucktion.com/tech/about/","Attachment":"https://www.jucktion.com/tech/incoming-remote-desktop-windows-home/windows-10-home-rdp-setup/","Nav_menu_item":"https://www.jucktion.com/tech/3985/"}}_ap_ufee Change the Firefox Developer tools to look like Sublime Text - Tech Junction

Change the Firefox Developer tools to look like Sublime Text

By | 22nd December, 2014 | 2 Comments

If you’re a web developer, then you probably know about Mozilla Firefox developer tools and also Sublime Text. Sublime Text is considered superior in many ways to other text IDE’s with it’s syntax highlighters, quick navigation, project management and extended plugins support. And let’s not forget it’s cross-platform supporting Linux, Mac and Windows desktops.

firefox devtools dark theme

One of the best feature also it’s dark interface and themes. It provides a distraction free interface that the coding community loves. And it’s dark theme are soothing for the eyes too, so you don’t stress your eyes too much while you search for a bug in your code. I found a quick hack for Firefox developer tools to set it to a dark them where the syntax are highlighted as in Sublime Text’s interface. And I for one love dark editors.  So here’s how you get it too.

Seems, there is a simple way to change the themes directly from the developer tools settings window. So all you have to do is open the developer tools and open up the settings panel, and then choose the dark theme option. That’s it.


If you wanna do it the other way, open up the “about:config” page. and then find the “devtools.theme” option. You can manually type it in the search bar above the configs. Once found edit the config from “light” to “dark“.

firefox config devtools

firefox devtools theme change

Once done, you can start your Fifefox developer window by pressing the “F12” button and there you’ll find the interface changed to a dark them with HTML syntax hightlighted just as in Sublime Text. Now you can mess with the developer settings without stressing your eyes too much.

firefox devtools light

Firefox Developer Tools Light Theme

firefox devtools dark theme

Firefox Developer Tools Dark Theme


That’s it, Enjoy this nice little hack if you like dark theme IDE’s you’ll love this too. Let us know what you think in the comments.

Tags: , , ,

Category: Browsers