Drag any of the icons in the body of the window to your toolbar to make them a permanent fixture.Īt the bottom of the window, you’ll see a couple of checkboxes that let you change the look of your Firefox window a bit. Here, you can customize a lot of the look and functionality of your browser. Open Firefox, and select the three-line menu icon in the upper right side of the window. Thankfully, Firefox also has an entire library of themes, often called Firefox personas, that you can add to overhaul the whole look of your browser. :root.That said, Firefox can still look pretty plain at times. Now that the setting up of the file is done, let’s move onto code. If it’s not there, create one and create a 'userChrome.css' in it. In the profile folder, you’ll see a folder named 'chrome'. This will open Firefox’s current profile folder. 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'. In this post we will be making use of that same CSS file to personalize the developer tools in Firefox.įirst, we need to find that CSS file, or make one and put it in the right place. You can add custom style rules to that CSS file and it’ll be reflected on the Mozilla products. Mozilla provides a way for users to configure its products’ appearance with a CSS file called 'userChrome.css'. Now, Firefox uses a combination of XUL and CSS for its UI, which means most of its appearance can be tweaked using just CSS.

Both are great, but the options are still limited without a way to personalize them.

Firefox has two themes for developer tools: dark and light. 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. Themes are a personal thing for us developers, it’s not just about beautification of editors or tools.

Personalizing mozilla firefox theme