Invertlet

Lately I’ve been having trouble with light-on-dark sites throwing me into a visual migraine. In tweeting with John Gruber about it (the problem is particularly aggressive on Daring Fireball for some reason), I stumbled upon the idea of using a CSS filter to invert() the entire html element and then revert img elements. Daring Fireball doesn’t have a unique identifier that I can target with a custom user stylesheet so JavaScript bookmarklet it is.

Just drag this Invert link into your bookmarks. Browsers really don’t like this JavaScript for some reason. You’ll need to add a bookmark for the current page and then edit the name and address manually. Here’s that JavaScript:

javascript:(function(){var id='si-invert-style';var s=document.getElementById(id); if(s){s.parentNode.removeChild(s)}else{s=document.createElement('style');s.id=id;s.innerHTML='html{filter:invert();} img{filter:invert();}';document.head.appendChild(s);}})();

So scary. Enjoy!