How to Personalize Firefox Developer Tools Theme

devtool ui

Hello friends today we gonna learn about How to Personalize Firefox Developer Tools Theme. So read this article, How to Personalize Firefox Developer Tools Theme step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Personalize Firefox Developer Tools Theme

Themes are a personal thing to us developers, it’s not just about decorating editors or tools. The point is to make the screen we’ll be staring at (without blinking much) more bearable to work on for hours on end and in a productive way. Firefox has two developer tools themes: dark and light. Both are great, but the options are still limited with no way to personalize them.

Now Firefox uses a combination of XUL and CSS for its user interface, which means that most of the appearance can be customized with just CSS. Mozilla provides a way for users to configure the appearance of its products with a CSS file called “userChrome.css”. You can add custom style rules to that CSS file and it will be reflected in the Mozilla products.

In this post, we’ll be using that same CSS file to personalize the developer tools in Firefox.

First we need to find that CSS file, or create one and put it in the right place. A quick way to find the folder where “userChrome.css” is located is to go to: support in the browser and click on “View folder” button next to the ‘Profile folder’ labelThis will open the current Firefox profile folder.

In the profile folder you will see a folder named “chrome”. If it isn’t there, create one and create a “userChrome.css” in it. Now that the setting up of the file is complete, let’s move on to 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-blue-gray: white! Important; -theme-highlight-light orange: # FF5A2C! Important; -theme- highlight-orange: yellow! important; -theme-highlight-red: # FF1247! important; -theme-highlight-pink: # F02898! important;}

What you see above is the code I added to my “userChrome.css” file to change the appearance of developer tools from here

to this:

devtool new ui

I just wanted to improve the contrast a bit more with a dark background and brighter text in the dark theme (I’m not good at color schemes either), so I stuck with some of the basic colors typically used in dark themes. If you are better with colors, experiment 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 called “omni.ja”:

In Windows, the file is located at:

F: /firefox/browser/omni.ja. Replace the F: with the drive where you installed your Firefox.

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 extension .ja to .zip and use the native Windows Explorer extractor to delete the files in it. In OSX go to Terminal and run unzip omni.ja. Make sure to make a copy of the file in another directory before doing this.

Once omni.ja has been extracted, you can find the file at /chrome/devtools/skin/variables.css; yes, the Firefox DevTools skin is located in a folder called chrome. In the variables.css you will see some color variables which are 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;

-Thema-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-light orange: # d97e00; –Theme-highlight-orange: # f13c00; –Theme-highlight-red: # ed2655; –Theme-highlight-pink: # b82ee5;

/ * Colors used in charts, such as performance tools. Similar colors to Chrome’s timeline. * / – theme-graphics-green: # 85d175; -theme-graphs-blue: # 83b7f6; -theme-graphs-blue-gray: # 0072ab; -theme-graphs-purple: # b693eb; -theme-graphs-yellow: # efc052; -theme-graphs-orange: # d97e00; -theme-graphs-red: # e57180; -theme-graphs-gray: #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 charts, such as performance tools. Usually similar to some “highlight *” colors. * / – theme-graphs-green: # 70bf53; -theme-graphs-blue: # 46afe3; -theme-graphs-blue-gray: # 5e88b0; -theme-graphs-purple: # df80ff; -theme-graphs-yellow: # d99b28; -theme-graphs-orange: # d96629; -theme-graphs-red: # eb5368; -theme-graphs-gray: # 757873; -theme-graphs-full-red: # f00; -theme-graphs-full -blue: # 00f;}

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

devtool debuggerdevtool new uidevtool storedevtool style

back to menu ↑

How to Personalize Firefox Developer Tools Theme: benefits

  • The How to Personalize Firefox Developer Tools Theme tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Personalize Firefox Developer Tools Theme guide is free.

back to menu ↑

Faq

Tutorial summary of How to Personalize Firefox Developer Tools Theme

In this guide, we told you about the How to Personalize Firefox Developer Tools Theme; please read all steps so that you understand How to Personalize Firefox Developer Tools Theme in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Personalize Firefox Developer Tools Theme, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Personalize Firefox Developer Tools Theme tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Personalize Firefox Developer Tools Theme. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Personalize Firefox Developer Tools Theme, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Personalize Firefox Developer Tools Theme”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Personalize Firefox Developer Tools Theme, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo