From c6f0c411fd2b7dc1b33b4808ecf5bb1e80d6b09f Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Wed, 11 Sep 2024 23:15:29 +0100
Subject: [PATCH] Use new useMediaQuery hook to determine dark theme

---
 thallium-frontend/src/App.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/thallium-frontend/src/App.tsx b/thallium-frontend/src/App.tsx
index 3a18181..10c3ff6 100644
--- a/thallium-frontend/src/App.tsx
+++ b/thallium-frontend/src/App.tsx
@@ -21,6 +21,7 @@ import { ToastContainer } from "react-toastify";
 
 import "react-toastify/dist/ReactToastify.css";
 import "./styles/toast-overrides.css";
+import { useMediaQuery } from "./utils/hooks.ts";
 
 
 const GlobalStyle = createGlobalStyle`
@@ -97,18 +98,12 @@ const router = createBrowserRouter([
 
 
 function App() {
-  const [isDarkMode, setIsDarkMode] = useState(false);
+  const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 
   maybeRefreshTask();
 
   const theme = isDarkMode ? themes.dark : themes.light;
 
-  useEffect(() => {
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-    setIsDarkMode(prefersDark);
-  }, []);
-
   return (
     <ThemeProvider theme={theme}>
       <AppContainer>