Nono.MA

Add Dark Mode to any website

MARCH 29, 2023

Here's a one-liner to turn any website into dark mode.

body, img { filter: invert(0.92) }

I apply this to selected sites using Stylebot, a Chrome extension that lets you apply custom CSS to specific websites.

In a nutshell, the CSS inverts the entire website and then inverts images again to render them normally. You can adjust the invert filter's amount parameter, which in the example is set to 0.92. 0 would be no color inversion at all. 100 would be full-color inversion; whites turn black, and blacks turn white. I often prefer to stay within 90–95% to reduce the contrast.

BlogCodeTil