Reverse the Colors when Viewing a Web Page

It’s not as good as a website that actually supports dark and light modes. Or as extensions that try to calculate an alternate color scheme. But if you want a quick-and-dirty solution to turn light web pages dark or dark webpages light, you can create a shortcut to just invert the colors on whatever page you’re looking at.

In a discussion on Mastodon, @Kagan@Wandering.shop suggested the following bookmarklet, though he couldn’t remember where he’d seen it:

javascript:void( document.body.parentElement.style.filter = "invert()" )

I immediately thought, “this can be super useful!” But that always switches to negative. What if you want a way to switch it back? So I modified it to work as a toggle:

javascript:void( document.body.parentElement.style.filter = ( document.body.parentElement.style.filter == '') ? 'invert()' : '')

Try it here: Invert Colors

Copy that second code to a new bookmark, or on Firefox you can just drag the link to your bookmarks bar.