Night mode bookmarklet: 5 minutes of fun with CSS filters
Enable night mode for any predominantly light web page using a bit of CSS filter trickery and JavaScript.
The filter property is a CSS3 feature that works like an SVG filter: it lets you apply special effects to elements.
Combining invert(1) and hue-rotate(180deg) performs a value inversion, changing light colours to dark and vice versa:
When applied to the <html> element, it makes predominantly light pages significantly easier on the eyes at night.
For a better experience, I’ve applied the filter twice to images and videos so that it cancels out.
You could even implement a night mode for your website by using a selector like .night-mode and then toggling the class on the <html> element based on the current time.
Here it is in bookmarklet form:
Just drag the button onto your bookmarks bar.