Merge pull request #1279 from mousumi2002/issues/1262

Fix: Prevent flash on dark theme
arc53 · Oct 8, 2024 · 2395785 · 2395785
2 parents 862ea5f + 68f4975
commit 2395785
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -32,7 +32,10 @@ function MainLayout() {
 }
 
 export default function App() {
-  useDarkTheme();
+  const [,,componentMounted] = useDarkTheme();
+  if(!componentMounted) {
+    return <div />
+  }
   return (
     <div className="h-full relative overflow-auto">
       <Routes>

diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
@@ -82,6 +82,7 @@ export function useDarkTheme() {
   };
 
   const [isDarkTheme, setIsDarkTheme] = useState<boolean>(getInitialTheme());
+  const [componentMounted, setComponentMounted] = useState(false);
 
   useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
@@ -102,11 +103,12 @@ export function useDarkTheme() {
     } else {
       document.body?.classList.remove('dark');
     }
+    setComponentMounted(true);
   }, [isDarkTheme]);
 
   const toggleTheme = () => {
     setIsDarkTheme(!isDarkTheme);
   };
 
-  return [isDarkTheme, toggleTheme] as const;
+  return [isDarkTheme, toggleTheme, componentMounted] as const;
 }