favicon dark light inside svg with css added

public/images/favicon.svg

@@ -1,9 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round" stroke-linejoin="round">
-    <path d="m12.99 6.74 1.93 3.44" />
-    <path d="M19.136 12a10 10 0 0 1-14.271 0" />
-    <path d="m21 21-2.16-3.84" />
-    <path d="m3 21 8.02-14.26" />
-    <circle cx="12" cy="5" r="2" />
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-drafting-compass-icon lucide-drafting-compass">
+
+    <style>
+    .icon-path {
+      stroke: #273240;
+    }
+    @media (prefers-color-scheme: dark) {
+      .icon-path {
+        stroke: #ffffff;
+      }
+    }
+    </style>
+
+    <path class="icon-path" d="m12.99 6.74 1.93 3.44"/>
+    <path class="icon-path" d="M19.136 12a10 10 0 0 1-14.271 0"/>
+    <path class="icon-path" d="m21 21-2.16-3.84"/>
+    <path class="icon-path" d="m3 21 8.02-14.26"/>
+    <circle class="icon-path" cx="12" cy="5" r="2"/>
 </svg>