JavaScript: Invertir color en todos los elementos de una página

Lo primero es lo primero, agarra la impresionante RGBColor clase aquí.

Aquí va:

Ejemplo de JsFiddle

//set up color properties to iterate through
var 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
    }
});

Captura de pantalla:

EDITAR : Aquí hay un bookmarklet que ahora puede copiar y pegar en su navegador ( 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();});

He limpiado los comentarios de una de las respuestas (por leosok) de arriba, por lo que funcionará como un bookmarklet en chrome. Tenga en cuenta que esta solución es más eficiente que el punto más alto actual aquí, además de que funciona incluso si el html cambia después de ejecutar el 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);
}());

Una línea para bookmarklet. crear un marcador, a continuación, editar la url a este: 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); }());

La respuesta aceptada es totalmente correcta, con un defecto menor. Cada vez que cambia la inversión, agrega OTRA etiqueta de estilo a la cabeza. Haga esto en su lugar

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

  let head = $('head')[0];
  let invertStyle = $('#invert')[0];

  if (invertStyle) {
    head.removeChild(invertStyle);
  } else {
    let style = document.createElement('style');

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

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

De esa manera, simplemente elimina la etiqueta si quieres deshacer la inversión. Funciona muy bien!

Pensé que sería divertido intentar invertir imágenes. No tardó mucho en encontrar una biblioteca Javascript adecuada para la edición de imágenes: http://www.pixastic.com/lib /

Probablemente no pueda cargar toda esa biblioteca en un bookmarklet, pero si lo aloja usted mismo puede agregar algo como esto al final del bookmarklet (después de invertColors):

load_script('http://www.example.com/pixastic.invert.js', function () {$('img').each(function() {try{$(this).pixastic("invert");} catch(e) {}})})

Creo que vale la pena señalar que si su objetivo es tomar una página con un fondo blanco y hacerla negra (o vice versa), algo más simple podría estar en orden.

Acabo de probar el bookmarklet de Jacob y lo comparé con una versión más ingenua que encontré en los foros de soporte de Google: http://www.google.com/support/forum/p/Chrome/thread?tid=26affebdd0da12d9&hl=en

La inversión de Jacob parece funcionar con menos frecuencia y toma un poco más de tiempo en páginas grandes. Creo que terminaré usando la versión ingenua con más frecuencia.