diff --git a/lib/hooks/useTheme.tsx b/lib/hooks/useTheme.tsx
index 12956453..ec56b322 100644
--- a/lib/hooks/useTheme.tsx
+++ b/lib/hooks/useTheme.tsx
@@ -1,15 +1,12 @@
-import { useEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 
 import { Maybe } from "@trpc/server";
 
 // makes sure the ui doesn't flash
 export default function useTheme(theme?: Maybe<string>) {
   const [isReady, setIsReady] = useState(false);
-  useEffect(() => {
-    setIsReady(true);
-    if (!theme) {
-      return;
-    }
+
+  useLayoutEffect(() => {
     if (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
       document.documentElement.classList.add("dark");
     } else if (!theme) {
@@ -17,7 +14,9 @@ export default function useTheme(theme?: Maybe<string>) {
     } else {
       document.documentElement.classList.add(theme);
     }
-  }, []);
+
+    setIsReady(true);
+  }, [theme]);
 
   return {
     isReady,