invert css js bookmarklet

by Laurens Maneschijn

HTML

<h1>Apply full page color invert, using css/js</h1>
<p>
  Drag link to bookmarks to save, or click it for a demo:<br>
  <a href="javascript:(function(){ var s_old = document.getElementById('_invertstyle'); if(s_old){s_old.remove();} var root_element = document.body.parentNode || document.body; document.body.innerHTML += '<style id=&quot;_invertstyle&quot;>.invert { filter: invert(100%); }</style>'; root_element.classList.contains('invert') ? root_element.classList.remove('invert') : root_element.classList.add('invert');  })();">invert</a> (raw)
  -
  <a href="javascript:(function(){ var s_old = document.getElementById('_invertstyle'); if(s_old){s_old.remove();} var root_element = document.body.parentNode || document.body; document.body.innerHTML += '<style id=&quot;_invertstyle&quot;>.invert { background: #000; filter: invert(100%); }</style>'; root_element.classList.contains('invert') ? root_element.classList.remove('invert') : root_element.classList.add('invert');  })();">invert + html black</a> (default)
  -
  <a href="javascript:(function(){ var s_old = document.getElementById('_invertstyle'); if(s_old){s_old.remove();} var root_element = document.body.parentNode || document.body; document.body.innerHTML += '<style id=&quot;_invertstyle&quot;>.invert { background: #000; filter: invert(100%) brightness(2); }</style>'; root_element.classList.contains('invert') ? root_element.classList.remove('invert') : root_element.classList.add('invert');  })();">invert + html black + brightness x2</a>
</p>

<hr>

<p>
	Similar effect from button; play around with css rules in .invert_demo class in the css pane to test different results.
	<button>invert</button>
</p>

<div class="democontent">
	<div>
	<table>
		<tbody>
			<tr><td>td1</td><td>td2</td></tr>
			<tr><td>td3</td><td>td4</td></tr>
		</tbody>
	</table>
	</div>
	<div>bla<div>blah<div>blaah</div></div></div>
	<div>
		normal
		<div style="background-color:#101010;">#101010</div>
		<div...

CSS

/*
Play around with this class 
to change the effect of the button:
*/
.invert_demo {
	background: #000;
	filter: invert(100%) brightness(1) contrast(0.5);
}


.democontent {
	background: #fff;
}
.democontent div {
	display: inline-block;
	vertical-align: top;
}
.democontent, .democontent * {
	margin: 2px;
	padding: 2px;
	border: 1px solid #eee;
}
.democontent > * {
	border: 1px solid #ddd;
}
.democontent > * > * {
	border: 1px solid #ccc;
}
.democontent tr:nth-child(1) td:nth-child(1){
	color: #f0f;
}
.democontent tr:nth-child(1) td:nth-child(2){
	color: #880;
}
.democontent tr:nth-child(2) td:nth-child(1){
	color: #f80;
}
.democontent tr:nth-child(2) td:nth-child(2){
	color: #08f;
}

h1,h2,h3,h4,h5,h6 {
	margin: 0;
	font-size: 1em;
}

JavaScript

function go() {
	// remove old to prevent duplicates, and also allows mixing different styles bookmarks:
	var s_old = document.getElementById('_invertstyle');
	if(s_old){s_old.remove();}
	// html tag, or else body tag:
	var root_element = document.body.parentNode || document.body;
	document.body.innerHTML += '<style id="_invertstyle">.invert { background: #000; filter: invert(100%) brightness(1); }</style>'; 
	root_element.classList.contains('invert') ? 
		root_element.classList.remove('invert') : 
		root_element.classList.add('invert') ;
}


// demo code only:
$(document.body).on('click', 'button', function () {
	$(document.body).toggleClass('invert_demo');
});