blob: 4ae5e5979090d3f945d408e4651d508a0267abd4 (
plain)
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);
}
}
```
|