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.

Wikipedia in night mode
Wikipedia in night mode.

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:

Value inversion
An example of value inversion. Notice how hue is unchanged.

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.


Related posts