Use new useMediaQuery hook to determine dark theme

owl-corp · Sep 11, 2024 · c6f0c41 · c6f0c41
1 parent 4123687
commit c6f0c41
Showing 1 changed file with 2 additions and 7 deletions.
diff --git 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>