How to invert web pages colour scheme in Firefox?

Question

I use to browse web in a dark room and would prefer if the backgrounds would be dark and text would be light instead of the opposite which is much more common. I suppose this can be achieved with some custom CSS or JS code applied but am not a web coder and am not sure about how to do this (especially to be applicable to all the web sites). Even more awesome it would be if there were an extension to install and get just the effect needed.

Any suggestions?

Answer 1

In WebKit based browsers, you can add the following style to achieve color inversion:

html { -webkit-filter: invert(); }

Sadly, we're currently waiting for the implementation in Firefox: https://developer.mozilla.org/en-US/docs/CSS/filter#Browser_compatibility

An equivalent in Firefox would look like:

html {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter></svg>#invert");
}

The results aren't anywhere near as nice though:

Bonus

Here's the bookmarklet for WebKit (requires jQuery to be loaded):

javascript:$("html").css("-webkit-filter","invert()")

Answer 2

Try this .. Tools> Options> Click Contents tab then Click on Colors Button. Now Untick "Allow pages blah blah...." check box. Now select white color for text and black color for bacground. Hope it helps. I did it on ver24.0.

Answer 3

(Edit: Just realized the bookmarklet doesn't work in Firefox, because Mozilla decided not to support Invert. But there's a jQuery link on the page that will do the same thing.) You could use the bookmarklet on this page: http://lea.verou.me/2011/04/invert-a-whole-webpage-with-css-only/

Operating system? I have an app on my Mac, Nocturne, it inverts colors across the board. Similar to just pressing ctrl-option-cmd-F8. I don't know of a way to do it on Windows. Nocturne is a little nicer as it tweaks the colors, doesn't just invert them, to make viewing a little nicer at night or in dim lighting. Advantage here is that everything, not just Firefox pages, get switched, and you don't have to keep re-applying it every time you load a new page.

Answer 4

Check this Add-on if it's useful for you.

It has some more good options. here is a screenshot>>>

Answer 5

Make a bookmarklet with the following URL:

javascript:void(document.getElementsByTagName('html')[0].style.webkitFilter='invert()');