Hello! I was wondering how can I change the colors that appear when you inspect an element. They look like this: And also was wondering how can I change the popup that appears when you right click the style sheets in the style editor in the toolbox. It looks like this: https://imgur.com/a/S47spyg
Thanks!
I think I looked into this some time in the past and it turned out that to do this, you need to use autoconfig scripting to inject a stylesheet as an agent style. Then, you can use style like this:
@namespace url('http://www.w3.org/2000/svg');
#box-model-elements{
--highlighter-box-content-color: hsl(297, 71%, 53%);
}
I'm limiting that style to only apply to svg elements by namespace, because otherwise the style will apply to all websites as well. But nonetheless, this would also set this custom property to all svg elements in any svg that has has that particular id. Not a huge deal, the point is simply that you need to do something to limit the scope the you want to apply changes to.
I see, this is for the highlighting, right?
And for the popup it would be the same? The other popups in my toolbox do look like they are intended to, its just that one that doesn't work.
Yeah, sorry I missed the question about the popup. Yes, you can change it, but it's via userContent.css not userChrome. Could look like this:
@-moz-document url("chrome://devtools/content/styleeditor/index.xhtml"){
.menupopup-arrowscrollbox{
background: #f00 !important;
}
}
Note that this only changes the popup that appears in style editor because the other parts of the toolbox are separate documents. Also, it only works for "normal" devtools but not for browser toolbox - to affect that you need to first set up userChrome.css for the toolbox profile, it's literally a separate firefox profile stored inside its target profile in a chrome_debugger_profile directory.
Perfect!
Thanks a lot!!
Post your unsupported Firefox customizations here!
From the makers of r/FirefoxCSS
Links
Related