feat: favicon dark mode support

fredericoo · fredericoo · commit b8f9e6300fcc · 2021-12-04T21:32:21.000Z
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -1,4 +1,17 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M299.444 214.128H342.111V342.128H214.111V299.461H269.275L155.578 185.764L185.748 155.594L299.444 269.291V214.128Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3281 106.677C21.3281 59.5488 59.5331 21.3438 106.661 21.3438H405.328C452.456 21.3438 490.661 59.5488 490.661 106.677V405.344C490.661 452.471 452.456 490.677 405.328 490.677H106.661C59.5331 490.677 21.3281 452.471 21.3281 405.344V106.677ZM106.661 64.0104H405.328C428.893 64.0104 447.995 83.1129 447.995 106.677V405.344C447.995 428.909 428.893 448.01 405.328 448.01H106.661C83.0973 448.01 63.9948 428.909 63.9948 405.344V106.677C63.9948 83.1129 83.0973 64.0104 106.661 64.0104Z" fill="black"/>
+
+<style>
+    .favicon {
+        fill: #000000
+    }
+    @media (prefers-color-scheme: dark) {
+        .favicon {
+            fill: #ffffff
+        }
+    }
+    </style>
+<g class="favicon">
+<path d="M299.444 214.128H342.111V342.128H214.111V299.461H269.275L155.578 185.764L185.748 155.594L299.444 269.291V214.128Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3281 106.677C21.3281 59.5488 59.5331 21.3438 106.661 21.3438H405.328C452.456 21.3438 490.661 59.5488 490.661 106.677V405.344C490.661 452.471 452.456 490.677 405.328 490.677H106.661C59.5331 490.677 21.3281 452.471 21.3281 405.344V106.677ZM106.661 64.0104H405.328C428.893 64.0104 447.995 83.1129 447.995 106.677V405.344C447.995 428.909 428.893 448.01 405.328 448.01H106.661C83.0973 448.01 63.9948 428.909 63.9948 405.344V106.677C63.9948 83.1129 83.0973 64.0104 106.661 64.0104Z" />
+</g>
 </svg>
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -17,6 +17,7 @@ class MyDocument extends Document {
           <meta name="apple-mobile-web-app-status-bar-style" content="default" />
 
           <link rel="icon" href="/favicon.png" />
+          <link rel="icon" href="/favicon.svg" />
           <link rel="apple-touch-icon" href="/favicon.png" />
         </Head>
         <body>
