Fix social icon colors if user localStorage color scheme doesn't match system color scheme

hasparus · hasparus · commit a47623fad7ba · 2025-08-05T00:57:51.000+02:00
diff --git a/next.config.js b/next.config.js
@@ -72,7 +72,24 @@ export default withLess(
             {
               loader: "@svgr/webpack",
               options: {
-                dimensions: false, // **adds** viewBox.
+                typescript: true,
+                svgoConfig: {
+                  plugins: [
+                    {
+                      name: "preset-default",
+                      params: {
+                        overrides: {
+                          minifyStyles: false,
+                          removeViewBox: false,
+                          removeTitle: false,
+                        },
+                      },
+                    },
+                    "removeXMLNS",
+                    "removeXlink",
+                    "prefixIds",
+                  ],
+                },
               },
             },
           ],
diff --git a/src/components/index-page/trusted-by/logos/AWS.svg b/src/components/index-page/trusted-by/logos/AWS.svg
@@ -5,10 +5,8 @@
   height="245"
 >
   <style>
-    @media (prefers-color-scheme: dark) {
-      .st0 {
-        fill: #fff;
-      }
+    html[class~="dark"] .st0 {
+      fill: #fff;
     }
   </style>
   <path
diff --git a/src/components/index-page/trusted-by/logos/AirBnB.svg b/src/components/index-page/trusted-by/logos/AirBnB.svg
@@ -4,11 +4,9 @@
   xml:space="preserve"
 >
   <style>
-    @media (prefers-color-scheme: dark) {
-      .st0 {
-        fill: #fff;
-      }
-    }
+    html[class~="dark"] .st0 {
+      fill: #fff;
+    } 
   </style>
   <path
     class="st0"
diff --git a/src/components/index-page/trusted-by/logos/GitHub.svg b/src/components/index-page/trusted-by/logos/GitHub.svg
@@ -15,10 +15,9 @@
     .st0 {
       fill: #1b1f24;
     }
-    @media (prefers-color-scheme: dark) {
-      .st0 {
-        fill: #fff;
-      }
+    
+    html[class~="dark"] .st0 {
+      fill: #fff;
     }
   </style>
   <g>
diff --git a/src/components/index-page/trusted-by/logos/IBM.svg b/src/components/index-page/trusted-by/logos/IBM.svg
@@ -7,10 +7,8 @@
   fill="#1f70c1"
 >
   <style>
-    @media (prefers-color-scheme: dark) {
-      .st0 {
-        fill: #fff;
-      }
+    html[class~="dark"] .st0 {
+      fill: #fff;
     }
   </style>
   <path
diff --git a/src/components/index-page/trusted-by/logos/Intuit.svg b/src/components/index-page/trusted-by/logos/Intuit.svg
@@ -5,10 +5,8 @@
   height="118.012px"
 >
   <style>
-    @media (prefers-color-scheme: dark) {
-      .st0 {
-        fill: #fff;
-      }
+    html[class~="dark"] .st0 {
+      fill: #fff;
     }
   </style>
   <path
diff --git a/src/components/index-page/trusted-by/logos/Meta.svg b/src/components/index-page/trusted-by/logos/Meta.svg
@@ -6,10 +6,8 @@
   fill="#1C2A33"
 >
   <style>
-    @media (prefers-color-scheme: dark) {
-      .meta path {
-        fill: #fff;
-      }
+    html[class~="dark"] .meta path {
+      fill: #fff;
     }
   </style>
   <g class="meta" clip-path="url(#clip0_1645_25515)">
diff --git a/src/components/index-page/trusted-by/logos/NewYorkTimes.svg b/src/components/index-page/trusted-by/logos/NewYorkTimes.svg
@@ -6,10 +6,8 @@
   fill="#000"
 >
   <style>
-    @media (prefers-color-scheme: dark) {
-      .st0 {
-        fill: #fff;
-      }
+    html[class~="dark"] .st0 {
+      fill: #fff;
     }
   </style>
   <path
diff --git a/src/components/index-page/trusted-by/logos/Shopify.svg b/src/components/index-page/trusted-by/logos/Shopify.svg
@@ -12,10 +12,8 @@
     .st2 {
       fill: #fff;
     }
-    @media (prefers-color-scheme: dark) {
-      .st0 {
-        fill: #fff;
-      }
+    html[class~="dark"] .st0 {
+      fill: #fff;
     }
   </style>
   <path
diff --git a/src/components/index-page/trusted-by/logos/Starbucks.svg b/src/components/index-page/trusted-by/logos/Starbucks.svg
@@ -6,10 +6,8 @@
   fill="#036242"
 >
   <style>
-    @media (prefers-color-scheme: dark) {
-      .st0 {
-        fill: #fff;
-      }
+    html[class~="dark"] .st0 {
+      fill: #fff;
     }
   </style>
   <path
diff --git a/src/components/index-page/trusted-by/style.module.css b/src/components/index-page/trusted-by/style.module.css
@@ -19,7 +19,7 @@
       fill: hsl(var(--color-neu-600));
     }
 
-    @media (prefers-color-scheme: dark) {
+    html[class~="dark"] & {
       &:not(:hover) svg,
       &:not(:hover) path {
         fill: hsl(var(--color-neu-200));
