I like how websites are rolling out their dark modes one by one. So, I thought of a small trick that inverts all colors of a website.

What I will be doing is creating a bookmarklet that changes the filter style of the DOM. This works great for websites that are text based, but not so great for websites with lots of media(images,videos).

So you need to to create a new bookmark and then add this script to the url.

    if (document.querySelector('html').style.filter != "") {document.querySelector('html').style.setProperty("filter", ""); } 
    else {document.querySelector('html').style.setProperty("filter", "invert(90%) grayscale(40%)", "important"); }

You should enable your bookmarks bar so that you can use it readily on any page.

Some examples:

Stack Overflow



After: You can see how it handles the images

Do note that this fails horribly on media content websites.

I find it useful when I am reading some texts in late night and the website does not have a dark mode or I am too lazy to change it, as clicking on the bookmark is just too convenient.

I was thinking of using some hex color inverter and just iterate thorough the DOM and replace color codes with its inverse, but that was resulting in uglier look since not all websites follow the same set of color styling and in that case the images just looked way too bad. What could be cool if we could run some algorithm to convert images and replace them as per our inverted color that we will be replacing to make it more smooth and blend well. But that would be overkill and not lightweight at all.