Color inverter bookmarklet
by mVChr
HTML
Invert these colors!
<button>Invert</button>
CSS
body {
background: #333;
color: #ccc;
}
JavaScript
var inverter = function (ev) {
$('*').each(function(i, el) {
var $el = $(el),
bgc = $el.css('background-color'),
c = $el.css('color'),
mbgc, nbgc, mc, nc;
if (bgc) {
mbgc = bgc.match(/(rgba?)\((\d+?)\s*\,\s*(\d+?)\s*\,\s*(\d+)\s*(\,.*?)?\)/i);
if (mbgc) {
nbgc = mbgc[1] + '(' + (255 - mbgc[2]) + ', ' + (255 - mbgc[3]) + ', ' + (255 - mbgc[4]) + (mbgc[5] ? mbgc[5] : '') + ')';
$el.css('background-image','none');
$el.css('background-color', nbgc);
}
}
if (c) {
mc = c.match(/(rgba?)\((\d+?)\s*\,\s*(\d+?)\s*\,\s*(\d+)\s*(\,.*?)?\)/i);
if (mc) {
nc = mc && mc[1] + '(' + (255 - mc[2]) + ', ' + (255 - mc[3]) + ', ' + (255 - mc[4]) + (mc[5] ? mc[5] : '') + ')';
$el.css('color', nc);
}
}
});
};
$('button').click(inverter);