Change the highlight color when inspecting an element and change the popup when right clicking a style sheet in the toolbox?
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
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:
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.
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.