Dynamic Image Sources

Posted on Jun 13, 2020

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.


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


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