From 52fd351fd6ecde64e101ea00df50c7b2c1fa698e Mon Sep 17 00:00:00 2001
From: Oleh Polisan <polisanoleg@gmail.com>
Date: Mon, 17 Jun 2024 19:00:16 +0300
Subject: [PATCH] svg: change fill color depending on theme

---
 static/deafened.svg | 11 ++++++++++-
 static/muted.svg    | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/static/deafened.svg b/static/deafened.svg
index c4ef926..b400d9d 100644
--- a/static/deafened.svg
+++ b/static/deafened.svg
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 4c3.87 0 7 3.13 7 7v2h-2.92L21 17.92V11a9 9 0 0 0-9-9c-1.95 0-3.76.62-5.23 1.68l1.44 1.44A6.914 6.914 0 0 1 12 4zM2.27 1.72 1 3l3.33 3.32A8.899 8.899 0 0 0 3 11v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-1.17.29-2.26.79-3.22L15 17v4h3c.3 0 .59-.06.86-.14L21 23l1.27-1.27-20-20.01z"/><path fill="#f6bfac" d="M2.27 1.72 1 3l20 20 1.27-1.27-20-20.01z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 0 24 24">
+    <style>
+          @media (prefers-color-scheme: dark) {
+            #headphonesIcon { fill: white }
+          }
+     </style>
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path id="headphonesIcon" fill="black" d="M12 4c3.87 0 7 3.13 7 7v2h-2.92L21 17.92V11a9 9 0 0 0-9-9c-1.95 0-3.76.62-5.23 1.68l1.44 1.44A6.914 6.914 0 0 1 12 4zM2.27 1.72 1 3l3.33 3.32A8.899 8.899 0 0 0 3 11v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-1.17.29-2.26.79-3.22L15 17v4h3c.3 0 .59-.06.86-.14L21 23l1.27-1.27-20-20.01z"/>
+    <path fill="#f6bfac" d="M2.27 1.72 1 3l20 20 1.27-1.27-20-20.01z"/>
+</svg>
\ No newline at end of file
diff --git a/static/muted.svg b/static/muted.svg
index fc93fb9..7166b17 100644
--- a/static/muted.svg
+++ b/static/muted.svg
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0zm0 0h24v24H0z"/><path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM9.02 10.28V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z"/><path fill="#f6bfac" d="M4.27 3 3 4.27l6.02 6.01L19.73 21 21 19.73 4.27 3"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 0 24 24">
+    <style>
+          @media (prefers-color-scheme: dark) {
+            #micIcon { fill: white }
+          }
+     </style>
+    <path fill="none" d="M0 0h24v24H0zm0 0h24v24H0z"/>
+    <path id="micIcon" fill="black" d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM9.02 10.28V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z"/>
+    <path fill="#f6bfac" d="M4.27 3 3 4.27l6.02 6.01L19.73 21 21 19.73 4.27 3"/>
+</svg>
\ No newline at end of file