Search code examples
firefoxcolorsbackgroundinspect-element

How to change background color of firefox's inspect element


Hopefully an easy one. I'm using Firefox 17.0.1 on Win 7. All was working fine, but now when i use "inspect element", the inspect element pane has a dark blue background with dark foreground colors for the html elements making it very hard to read. I have searched and searched but naturally most searches turn up results about changing a page's background color rather than that of the inspector itself. Any help appreciated. Thanks.


Solution

  • An answer I have seen is to create a "user" style to force the background to be white.

    Link: http://support.mozilla.org/en-US/questions/943857

    To do this you install an addon for Firefox called "Stylish"

    Link: https://addons.mozilla.org/en-US/firefox/addon/stylish/

    And use it to create a user style with the following code:

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document url("chrome://browser/content/devtools/markup-view.xhtml") {
    body { background: white !important }
    }
    

    I have done this and it works for me.

    Link for documentaion for the Stylish addon: http://userstyles.org/help/stylish_firefox