Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to change background color of the inspect element pane (i.e. the inspector's pane not the page being inspected)

  • 4 replies
  • 7 have this problem
  • 87 views
  • Last reply by tombyrnes

more options

This pane suddenly changed to a dark blue background. With the font's of the inspected elements having dark foreground colors it is very difficult to read. How do I get the white background back? Thank You.

This pane suddenly changed to a dark blue background. With the font's of the inspected elements having dark foreground colors it is very difficult to read. How do I get the white background back? Thank You.

Chosen solution

Apply the following user style with the Stylish extension.


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("chrome://browser/content/devtools/markup-view.xhtml") {

body { background: white !important }

}

If you need to modify anything else, you can use the DOM Inspector extension to examine user interface elements ("chrome").

If you need help with CSS code, see below for a starting point.

Read this answer in context 👍 2

All Replies (4)

more options

Chosen Solution

Apply the following user style with the Stylish extension.


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("chrome://browser/content/devtools/markup-view.xhtml") {

body { background: white !important }

}

If you need to modify anything else, you can use the DOM Inspector extension to examine user interface elements ("chrome").

If you need help with CSS code, see below for a starting point.

more options

Gingerbreadman:

Outstanding! The stylish user style did the trick with the background. Now I'll just tweak it with a bit more CSS and Bob's your uncle. Thanks a million.

more options

See also this stylesheet:

  • chrome://browser/skin/devtools/markup-view.css
more options

Cor-el: I got it. Thank you for taking the time. Appreciated.