OliverBooth/Pages/Shared/_Layout.cshtml

@@ -48,6 +48,8 @@
         <meta property="twitter:description" content="Coffee enthusiast and lover of all things tech. Tech enthusiast and lover of all things coffee.">
     }
     <link rel="shortcut icon" href="/img/favicon.png" asp-append-version="true">
+    <link rel="shortcut icon" href="/img/favicon.png" asp-append-version="true" media="(prefers-color-scheme: light)">
+    <link rel="shortcut icon" href="/img/favicon-dark.png" asp-append-version="true" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css" integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css" integrity="sha512-7nTa5CnxbzfQgjQrNmHXB7bxGTUVO/DcYX6rpgt06MkzM0rVXP3EYCv/Ojxg5H0dKbY7llbbYaqgfZjnGOAWGA==" crossorigin="anonymous" referrerpolicy="no-referrer">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">

src/ts/app.ts

@@ -69,4 +69,14 @@ declare const lucide: any;
             }
         });
     }
+
+    function setFavicon() {
+        const darkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const favicon = document.querySelector("link[rel~=\"icon\"]");
+        // @ts-ignore
+        favicon.href = `/img/${darkMode ? "favicon-dark.png" : "favicon.png"}`;
+    }
+
+    setFavicon();
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", setFavicon);
 })();