logo color change dark mode

Author: julianengel

styles.css

@@ -2,6 +2,7 @@
 :root {
     --bg-color: #fafafa;
     --text-color: #333;
+    --logo-color: #010101;
     --card-bg: white;
     --grid-color: rgba(0,0,0,0.03);
     --shadow-color: rgba(0,0,0,0.05);
@@ -11,6 +12,7 @@
 [data-theme="dark"] {
     --bg-color: #1a1a1a;
     --text-color: #e1e1e1;
+    --logo-color: #ffffff;
     --card-bg: #2a2a2a;
     --grid-color: rgba(255,255,255,0.03);
     --shadow-color: rgba(0,0,0,0.2);
@@ -56,7 +58,11 @@ h1 {
 .logo {
     height: 24px;
     width: auto;
-    color: var(--text-color);
+    transition: filter 0.3s ease;
+}
+
+[data-theme="dark"] .logo {
+    filter: invert(1);
 }
 
 /* Dark mode toggle */
@@ -89,7 +95,7 @@ h1 {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-image: url("svg/sun-icon.svg");
+    background-image: url("images/sun-icon.svg");
     background-size: 16px;
     background-position: center;
     background-repeat: no-repeat;
@@ -102,7 +108,7 @@ h1 {
 .theme-toggle[aria-checked="true"]::before {
     transform: translateX(32px);
     background-color: #2d3748;
-    background-image: url("svg/moon-icon.svg");
+    background-image: url("images/moon-icon.svg");
 }
 
 /* Product list */