From d7da16ecfa5cadb643df78694db44963ba665cbe Mon Sep 17 00:00:00 2001
From: Shubham Saini <me@ubh.sh>
Date: Wed, 8 Feb 2023 16:19:28 -0800
Subject: init

---
 content/posts/dynamic-img.md | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100755 content/posts/dynamic-img.md

(limited to 'content/posts/dynamic-img.md')

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 @@
+---
+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);
+    }
+}
+```
+
+
-- 
cgit v1.2.3