[removed] Invert color on all elements of a page

Question

Note: I am keeping an up-to-date version of the bookmarklet in my question which works well and is based on Jacob\'s answer. If you are looking for a bookma

Answer 1

Hello fellow inverters!

my solution seems to work only for chrome right now, but it inverts everything (including images and iframes) as seen here:

Also it does not make use of external libraries and is very simple: adding a -webkit-filter: invert(100%) to the html-selector.

javascript: (
function () { 
// the css we are going to inject
var css = 'html {-webkit-filter: invert(100%);' +
    '-moz-filter: invert(100%);' + 
    '-o-filter: invert(100%);' + 
    '-ms-filter: invert(100%); }',

head = document.getElementsByTagName('head')[0],
style = document.createElement('style');

// a hack, so you can "invert back" clicking the bookmarklet again
if (!window.counter) { window.counter = 1;} else  { window.counter ++;
if (window.counter % 2 == 0) { var css ='html {-webkit-filter: invert(0%); -moz-filter:    invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'}
 };

style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}

//injecting the css to the head
head.appendChild(style);
}());

For me, this only works in chrome. But there it works like a charm.

Here's the fiddle: http://jsfiddle.net/nikita_turing/jVKw6/3/ With the Bookmarklet included. If someone has an Idea how to make it work for Firefox (SVG-Filters?) go ahead!

Greets leosok