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

Leo Nikkilä
Hello, my name is Leo Nikkilä.

I’m a mobile and web developer freelancing worldwide from Helsinki, Finland.

Right now I’m working with Android and Kotlin, and exploring functional programming with Elixir and Elm.

Send me mail at [email protected] or a message on Twitter!

Interested in hiring me?

Do you need quality code for your next big thing? Some extra oomph to your team?

Currently I’m not immediately available for new work, but feel free to contact me anyway and I’ll see what I can do.