diff --git a/apps/docs/context/theme/ThemeProvider.tsx b/apps/docs/context/theme/ThemeProvider.tsx
index a700ebf64..782367e6d 100644
--- a/apps/docs/context/theme/ThemeProvider.tsx
+++ b/apps/docs/context/theme/ThemeProvider.tsx
@@ -21,9 +21,7 @@ export const ThemeContext = createContext<ColorSchemeContextType>({
 });
 
 export const ThemeProvider = ({ children }: ThemeProviderProps) => {
-    const [colorMode, setColorMode] = useState<ColorScheme | undefined>(
-        undefined
-    );
+    const [colorMode, setColorMode] = useState<ColorScheme>(() => getInitialColorMode());
 
     useEffect(() => {
         if (colorMode) {
@@ -32,12 +30,12 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
         }
     }, [colorMode]);
 
-    useEffect(() => {
-        setColorMode (getInitialColorMode());
-    }, [setColorMode ]);
-
     return (
-        <ThemeContext.Provider value={{ colorMode, setColorMode }}>
+        <ThemeContext.Provider value={{
+            colorMode: colorMode,
+            setColorMode
+        }}
+        >
             {children}
         </ThemeContext.Provider>
     );