How to Hack & Personalize Your Firefox Developer Tools Theme
Themes are a personal thing for us developers, it’s not just about beautification of editors or tools. It’s about making the screen that we’ll be staring at (without blinking much) more bearable to work at for hours on end and in a productive manner. Firefox has two themes for developer tools: dark and light. Both are great, but the options are still limited without a way to personalize them.
Now, Firefox uses a combination of XUL and CSS for its UI, which means most of its appearance can be tweaked using just CSS. Mozilla provides a way for users to configure its products’ appearance with a CSS file called "userChrome.css". You can add custom style rules to that CSS file and it’ll be reflected on the Mozilla products.
In this post we will be making use of that same CSS file to personalize the developer tools in Firefox.
First, we need to find that CSS file, or make one and put it in the right place. One quick way to find the folder that will house "userChrome.css" is by going to about:support in the browser and clicking the "Show Folder" button next to the label "Profile Folder". This will open Firefox’s current profile folder.
In the profile folder, you’ll see a folder named "chrome". If it’s not there, create one and create a "userChrome.css" in it. Now that the setting up of the file is done, let’s move onto code.
:root.theme-dark {
--theme-body-background: #050607 !important;
--theme-sidebar-background: #101416 !important;
--theme-tab-toolbar-background: #161A1E !important;
--theme-toolbar-background: #282E35 !important;
--theme-selection-background: #478DAD !important;
--theme-body-color: #D6D6D6 !important;
--theme-body-color-alt: #D6D6D6 !important;
--theme-content-color1: #D6D6D6 !important;
--theme-content-color2: #D6D6D6 !important;
--theme-content-color3: #D6D6D6 !important;
--theme-highlight-green: #8BF9A6 !important;
--theme-highlight-blue: #00F9FF !important;
--theme-highlight-bluegrey: white !important;
--theme-highlight-lightorange: #FF5A2C !important;
--theme-highlight-orange: yellow !important;
--theme-highlight-red: #FF1247 !important;
--theme-highlight-pink: #F02898 !important;
}
What you see above is the code that I added to my "userChrome.css" file to change the appearance of developers tools from this
to this:
I only wanted to improve the contrast a bit more with darker background and brighter text in the dark theme (also I’m not good at color schemes), so I stayed with some basic colors typically used in dark themes. If you are better with colors, experiment on your own with the colors as you see fit to find a better match for the theme you are using.
The code is just a list of CSS color variables used to color the various UI parts of DevTools. We found the code in a file called "variables.css" in a compressed file named “omni.ja”:
In Windows, the file is located at:
F:/firefox/browser/omni.ja. Replace the F: with the drive where you’ve installed your Firefox in.
In OSX, the file is located at:
~/Applications/Firefox.app/Contents/Resources/browser/omni.ja.
These are compressed Java files. In Windows, you can rename the .ja extension to .zip and use the native Windows Explorer extract utility to unload the files within it. In OSX, go to Terminal and run unzip omni.ja. Bear in mind to make a copy of the file in another directory before doing so.
Once omni.ja has beeen extracted, you can find the file at /chrome/devtools/skin/variables.css; yes, the Firefox DevTools skin is under a folder named chrome. In the variables.css, you’ll see a bunch of color variables used for both the light and dark themes as follows
:root.theme-light {
--theme-body-background: #fcfcfc;
--theme-sidebar-background: #f7f7f7;
--theme-contrast-background: #e6b064;
--theme-tab-toolbar-background: #ebeced;
--theme-toolbar-background: #f0f1f2;
--theme-selection-background: #4c9ed9;
--theme-selection-background-semitransparent: rgba(76, 158, 217, .23);
--theme-selection-color: #f5f7fa;
--theme-splitter-color: #aaaaaa;
--theme-comment: #757873;
--theme-body-color: #18191a;
--theme-body-color-alt: #585959;
--theme-content-color1: #292e33;
--theme-content-color2: #8fa1b2;
--theme-content-color3: #667380;
--theme-highlight-green: #2cbb0f;
--theme-highlight-blue: #0088cc;
--theme-highlight-bluegrey: #0072ab;
--theme-highlight-purple: #5b5fff;
--theme-highlight-lightorange: #d97e00;
--theme-highlight-orange: #f13c00;
--theme-highlight-red: #ed2655;
--theme-highlight-pink: #b82ee5;
/* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
--theme-graphs-green: #85d175;
--theme-graphs-blue: #83b7f6;
--theme-graphs-bluegrey: #0072ab;
--theme-graphs-purple: #b693eb;
--theme-graphs-yellow: #efc052;
--theme-graphs-orange: #d97e00;
--theme-graphs-red: #e57180;
--theme-graphs-grey: #cccccc;
--theme-graphs-full-red: #f00;
--theme-graphs-full-blue: #00f;
}
:root.theme-dark {
--theme-body-background: #14171a;
--theme-sidebar-background: #181d20;
--theme-contrast-background: #b28025;
--theme-tab-toolbar-background: #252c33;
--theme-toolbar-background: #343c45;
--theme-selection-background: #1d4f73;
--theme-selection-background-semitransparent: rgba(29, 79, 115, .5);
--theme-selection-color: #f5f7fa;
--theme-splitter-color: black;
--theme-comment: #757873;
--theme-body-color: #8fa1b2;
--theme-body-color-alt: #b6babf;
--theme-content-color1: #a9bacb;
--theme-content-color2: #8fa1b2;
--theme-content-color3: #5f7387;
--theme-highlight-green: #70bf53;
--theme-highlight-blue: #46afe3;
--theme-highlight-bluegrey: #5e88b0;
--theme-highlight-purple: #6b7abb;
--theme-highlight-lightorange: #d99b28;
--theme-highlight-orange: #d96629;
--theme-highlight-red: #eb5368;
--theme-highlight-pink: #df80ff;
/* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
--theme-graphs-green: #70bf53;
--theme-graphs-blue: #46afe3;
--theme-graphs-bluegrey: #5e88b0;
--theme-graphs-purple: #df80ff;
--theme-graphs-yellow: #d99b28;
--theme-graphs-orange: #d96629;
--theme-graphs-red: #eb5368;
--theme-graphs-grey: #757873;
--theme-graphs-full-red: #f00;
--theme-graphs-full-blue: #00f;
}
Pick the theme and variables you want to target and add them to your "userChrome.css".
Here are some more screenshots of my developer tools’ window.
Want to customize Chrome’s DevTools Theme instead? Check out this post.