How to invert colors using CSS

How to invert the colors of elements and images using CSS

I have this problem. I added a "black on white" image on the page, only to realize that in dark mode, my page can correctly change the background to black, but the image is still black on white.

Kind of bad.

Therefore, I added this rule to CSS to detect dark mode and automatically invert the color of the image:

@media (prefers-color-scheme: dark) {
  .my-image {
    filter: invert(100%);
  }
}

In my case, this is not 100% accurate because my dark background color is not perfect black, but it is better than nothing.

To make things perfect, you can also use CSS background images (instead ofimgMark it up as HTML so I can easily replace it with dark mode.

Download mine for freeCSS Manual


More CSS tutorials: