add theme support

 README.md                |  21 ++++++++++++++++++---
 images/Haskell_dark.png  | Bin 139330 -> 162916 bytes
 images/Haskell_light.png | Bin 136821 -> 160384 bytes
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 0176f39..6a1ec86 100644
--- a/README.md
+++ b/README.md
@@ -18,9 +18,24 @@ Here is why Myna stands apart from other fonts:
 - **Language Agnostic**: clean sigils (`$s @a %h &f *x`) for Perl + elegant operators (`:: -> <$> >>=`) for Haskell + clear symbols (`-> ++ -- += << >>`) for C/C++
 
 ## Showcase
-<img src="images/Perl_dark.png"  width="1200">
-<img src="images/Haskell_light.png" width="1200">
-<img src="images/C_dark.png" width="1200">
+<picture>
+  <source media="(prefers-color-scheme: dark)"  srcset="images/Perl_dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="images/Perl_light.png">
+  <img alt="Perl" src="https://example.com/Perl_light.png">
+</picture>
+
+<picture>
+  <source media="(prefers-color-scheme: dark)"  srcset="images/Haskell_dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="images/Haskell_light.png">
+  <img alt="Haskell" src="https://example.com/Haskell_light.png">
+</picture>
+
+<picture>
+  <source media="(prefers-color-scheme: dark)"  srcset="images/C_dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="images/C_light.png">
+  <img alt="C" src="https://example.com/C_light.png">
+</picture>
+
 
 | Language | Light | Dark |
 |----------|-------|------|
diff --git a/images/Haskell_dark.png b/images/Haskell_dark.png
index a5cdedf..8d2131b 100644
Binary files a/images/Haskell_dark.png and b/images/Haskell_dark.png differ
diff --git a/images/Haskell_light.png b/images/Haskell_light.png
index ac2b566..be6ef4e 100644
Binary files a/images/Haskell_light.png and b/images/Haskell_light.png differ