Auto dark mode images with CSS

CSS-only: Automatic Dark Mode for Images ⭐️

Just two CSS properties can adapt a light image for Dark Mode.

In Tailwind, it takes only two classes:
invert hue-rotate-180 (open in playground)

1️⃣ The invert filter turns white into black but distorts other colors.
2️⃣ However, hue-rotate shifts the hues to approximate the original colors:
→ red stays red
→ green stays green
→ blue stays blue
→ and so on.

By adjusting inversion percentage and hue rotation you can quickly fine tune your image to match dark mode the best.

With this trick you may not need to generate separate images for dark mode on your website. Just apply proper styles to existing images.

The trick inspired by https://v8.dev/blog/javascript-code-coverage images styles.