diff options
author | Shubham Saini <me@ubh.sh> | 2023-02-09 00:19:28 +0000 |
---|---|---|
committer | Shubham Saini <me@ubh.sh> | 2023-02-09 00:19:28 +0000 |
commit | d7da16ecfa5cadb643df78694db44963ba665cbe (patch) | |
tree | 00c5234f542f7064e91827064767bcf59f094a2c /content/posts/dynamic-img.md |
init
Diffstat (limited to 'content/posts/dynamic-img.md')
-rwxr-xr-x | content/posts/dynamic-img.md | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/content/posts/dynamic-img.md b/content/posts/dynamic-img.md new file mode 100755 index 0000000..4ae5e59 --- /dev/null +++ b/content/posts/dynamic-img.md | |||
@@ -0,0 +1,39 @@ | |||
1 | --- | ||
2 | title: "Dynamic Image Sources" | ||
3 | date: 2020-06-13T13:20:34+05:30 | ||
4 | description: Using dynamic image source for dynamic CSS | ||
5 | draft: false | ||
6 | --- | ||
7 | 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 | ||
8 | |||
9 | ![](https://media1.tenor.com/images/ee55cce2b19a8a3731a14b0348ffe4ad/tenor.gif) | ||
10 | |||
11 | (well accept for feather icons. i'll add only few icons once i get time.) | ||
12 | |||
13 | ## Using invert color filter in CSS | ||
14 | ```css | ||
15 | img { | ||
16 | -webkit-filter: invert(1); | ||
17 | filter: invert(1); | ||
18 | } | ||
19 | ``` | ||
20 | But sometimes it's just not the right way. | ||
21 | |||
22 | ## Using @media | ||
23 | This is a better approach as it changes the source of the image. | ||
24 | |||
25 | main.css | ||
26 | ```css | ||
27 | <img class="class_name" src='img_light.png'/> | ||
28 | ``` | ||
29 | |||
30 | dark.css | ||
31 | ```css | ||
32 | @media { | ||
33 | .class_name{ | ||
34 | content: url(img_dark.png); | ||
35 | } | ||
36 | } | ||
37 | ``` | ||
38 | |||
39 | |||