Dynamic Image Sources

My site uses dynamic css to generate dark or white theme based on user’s system theme. So sometimes, I need to use different image colors to fit my needs. There is a very easy fix which involves using javascript but

(well accept for feather icons. i’ll add only few icons once i get time.)

Using invert color filter in CSS

img {
   -webkit-filter: invert(1);
   filter: invert(1);
}

But sometimes it’s just not the right way.

Using @media

This is a better approach as it changes the source of the image.

main.css

<img class="class_name" src='img_light.png'/>

dark.css

@media {
    .class_name{
      content: url(img_dark.png);
    }
}