Use new useMediaQuery hook to determine dark theme

1 files 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>