content/posts/dynamic-img.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

---
title: "Dynamic Image Sources"
date: 2020-06-13T13:20:34+05:30
description: Using dynamic image source for dynamic CSS
draft: false
---
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

![](https://media1.tenor.com/images/ee55cce2b19a8a3731a14b0348ffe4ad/tenor.gif)

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

## Using invert color filter in CSS
```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
```css
<img class="class_name" src='img_light.png'/>
```

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