Merge pull request #111 from mlomb/light-favicon

Light mode favicon

app/index.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 
 import { HomePage } from "@app/HomePage";
 
+import "@assets/Favicon";
 import { plausible } from "@assets/Plausible";
 
 createRoot(document.getElementById("app") as HTMLElement).render(

assets/Favicon.ts

@@ -0,0 +1,13 @@
+function prefersDarkColorScheme() {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function updateFavicon() {
+    const favicon = document.querySelector("link[rel=icon]") as HTMLLinkElement;
+    const url = "https://chatanalytics.app/";
+
+    favicon.href = url + (prefersDarkColorScheme() ? "favicon-dark.png" : "favicon.png");
+}
+
+updateFavicon();
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => updateFavicon());

assets/report.html

@@ -6,7 +6,7 @@
 <meta name="robots" content="noindex, nofollow">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="Chat analysis report generated with chatanalytics.app">
-<link rel="shortcut icon" href="https://chatanalytics.app/favicon.png">
+<link rel="icon" href="https://chatanalytics.app/favicon.png">
 <link rel="preconnect" href="https://p.chatanalytics.app">
 <title>[[TITLE]]</title>
 <script type="text/plain" id="data">[[[DATA]]]</script>

report/index.tsx

@@ -5,6 +5,7 @@ import { initBlockStore } from "@report/BlockStore";
 import ReportPage from "@report/ReportPage";
 import { initWorker } from "@report/WorkerWrapper";
 
+import "@assets/Favicon";
 import { plausible } from "@assets/Plausible";
 
 document.addEventListener("DOMContentLoaded", async () => {