JavaScript: Invert color on all elements of a page

First things first, grab the awesome RGBColor class here.

Here goes:

jsFiddle example

//set up color properties to iterate throughvar colorProperties = ['color', 'background-color'];//iterate through every element in reverse order...$("*").get().reverse().each(function() {    var color = null;    for (var prop in colorProperties) {        prop = colorProperties[prop];        //if we can't find this property or it's null, continue        if (!$(this).css(prop)) continue;         //create RGBColor object        color = new RGBColor($(this).css(prop));        if (color.ok) {             //good to go, let's build up this RGB baby!            //subtract each color component from 255            $(this).css(prop, 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color.b) + ')');        }        color = null; //some cleanup    }});

Screenshot:

EDIT: Here's a bookmarklet you can now copy-paste into your browser (http://jsfiddle.net/F7HqS/1/)

javascript:function load_script(src,callback){var s=document.createElement('script');s.src=src;s.onload=callback;document.getElementsByTagName('head')[0].appendChild(s);}function invertColors(){var colorProperties=['color','background-color'];$('*').each(function(){var color=null;for(var prop in colorProperties){prop=colorProperties[prop];if(!$(this).css(prop))continue;color=new RGBColor($(this).css(prop));if(color.ok){$(this).css(prop,'rgb('+(255-color.r)+','+(255-color.g)+','+(255-color.b)+')');}color=null;}});}load_script('http://www.phpied.com/files/rgbcolor/rgbcolor.js',function(){if(!window.jQuery)load_script('https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',invertColors);else invertColors();});

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 injectvar 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 againif (!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 headhead.appendChild(style);}());

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

I cleaned up the comments from one of the answers (by leosok) above, so it will work as a bookmarklet in chrome. Note that this solution is more efficient than the current highest-point here, plus it works even if the html changes after you run the script.

javascript:(function () {     var css = 'html {-webkit-filter: invert(100%);' + '-moz-filter: invert(100%);' + '-o-filter: invert(100%);' + '-ms-filter: invert(100%); }';    var head = document.getElementsByTagName('head')[0];    var style = document.createElement('style');    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));    }    head.appendChild(style);}());

One line for bookmarklet. create a bookmark, then edit the url to this:javascript:(function () { var css = 'html {-webkit-filter: invert(100%);' + '-moz-filter: invert(100%);' + '-o-filter: invert(100%);' + '-ms-filter: invert(100%); }'; var head = document.getElementsByTagName('head')[0]; var style = document.createElement('style'); 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)); } head.appendChild(style); }());