Interactive color changing in Firefox with userstyle applied?

Hey guys. I'm looking for a solution that lets you change CSS colors in realtime, like you can with Firefox's Web Inspector (ctrl+shift+i). Normally you can click the little circular color swatches in the inspector and watch it update the web page's colors in real time, but if you have a userstyle applied, it doesn't do anything. It seems the inspector just has no idea that Stylish has applied a userstyle.

I tried using Firebug along with an addon called Firepicker, but it didn't work out as well as I'd like...had to reload the page each color change, instead of the way it normally updates in realtime. On the plus side, Firebug knows about changes Stylish makes, which is cool.

Any ideas?

BTW, I'm on a Windows 7 running Firefox 36...tested with both Stylish 1.4.3 and 2.0.2...and Firebug 2.0.8 with Firepicker 1.4.3.


  • edited March 2015 Firefox
    Don't you use Stylish Editor Mod? It has Preview button and Colorpicker button (which works well with Rainbowpicker instead of Fx default blahpicker). It also has a color convert button, with every click you can convert red>#FF0000>rgba(255, 0, 0, 1.0).
    I can't imagine how you can write a style efficiently w/out SEM!
  • I tell u what I do..
    Not use firebug cause slow down a lot the browser, the build in inspector is enough for me, I use DOMI for modify the browser and complement sometimes the firefox inspector.
    At first edit the style with notepad++ and paste content in stylish editor ( in new window mode).
    Often have open the page, inspector and stylish editor, then I can modify, inspect and see changes in real time.
    Hope I help u a little.
    Regards and congrats for your work.
  • edited March 2015 Firefox

    I found a solution, although it's not quite perfect and somewhat buggy :( Figured it out based on this bugzilla page:

    • Go to about:config in the URL bar
    • Find and set devtools.inspector.showUserAgentStyles to true
    • Go to the Style Editor (Shift-F7)
    • Create a new style (or edit an existing style)
    • Type in your CSS rule, but increase the specificity of the selector
    • Make sure you added !important at the end of each declaration
    • Go back to the Inspector tab, and you should be able to see your CSS rule, where you can manipulate the color by clicking the circular swatch.

    BTW, when I say to increase the specificity, the easiest way is just to prefix your CSS selector with 'html'. For example, if you wanted to just style the 'body' tag, you would be more specific and say 'html body'. If you don't, it most likely won't let you style it.

    html body {
        background: #f00 !important;

    @makondo: No, I don't use Stylish Editor Mod or Rainbowpicker. As far as I can tell, neither one lets me do real time color updating like this:

    Inspector color changer

    @a3cAnton: I don't normally use Firebug, but I had to try it to see if it could change colors quickly when a userstyle is applied. Also, I don't think editing in Notepad++ and pasting to the Stylish editor and then previewing is "real time"...that's a very slow process in my opinion ;) Real time to me means that if I pick a color, it immediately changes on the screen.

  • @makondo: sorry, perhaps my explanation is not very good (as my english).
    I mean this:
    1280 x 800 - 372K
  • edited March 2015 Firefox
    a3cAnton said:

    @makondo: sorry, perhaps my explanation is not very good (as my english)...

    image I had no problems with your post.
    I just think it's a long way around (plus, none of our suggestions is what Valacar is looking for anyway! image )
Sign In or Register to comment.