From 569101cf3acd28ed7fd0bae519f6cd566a96c70d Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@carberry.com>
Date: Thu, 5 Oct 2023 23:07:53 +0000
Subject: [PATCH] fix: use proper react hook for favicon theme

I was using `useState` before, which didn't re-render on load.
---
 .../pages/WorkspacePage/WorkspaceReadyPage.tsx  | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
index b09043046d0ac..d124a9d046969 100644
--- a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -98,15 +98,14 @@ export const WorkspaceReadyPage = ({
     ...templateVersion(workspace.template_active_version_id),
     enabled: workspace.outdated,
   });
-  const [systemTheme] = useState(() => {
-    if (typeof window.matchMedia === "undefined") {
-      // Default to dark mode!
-      return "dark";
+  const [faviconTheme, setFaviconTheme] = useState<"light" | "dark">("dark");
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
     }
     const isDark = window.matchMedia("(prefers-color-scheme: dark)");
-    return isDark ? "dark" : "light";
-  });
-
+    setFaviconTheme(isDark ? "dark" : "light");
+  }, []);
   const buildLogs = useWorkspaceBuildLogs(workspace.latest_build.id);
   const shouldDisplayBuildLogs =
     hasJobError(workspace) ||
@@ -132,12 +131,12 @@ export const WorkspaceReadyPage = ({
         <link
           rel="alternate icon"
           type="image/png"
-          href={`/favicons/${favicon}-${systemTheme}.png`}
+          href={`/favicons/${favicon}-${faviconTheme}.png`}
         />
         <link
           rel="icon"
           type="image/svg+xml"
-          href={`/favicons/${favicon}-${systemTheme}.svg`}
+          href={`/favicons/${favicon}-${faviconTheme}.svg`}
         />
       </Helmet>