Issue#51 Fix flickering issue in dark mode during website load

zeropsio · Oct 7, 2024 · df7d12a · df7d12a
1 parent aadca4c
commit df7d12a
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/packages/docs-ui/src/providers/ColorMode/index.tsx b/packages/docs-ui/src/providers/ColorMode/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useLayoutEffect, useState } from 'react';
 
 export type ColorMode = 'light' | 'dark';
 
@@ -23,16 +23,18 @@ export const ColorModeProvider = ({ children }: ColorModeProviderProps) => {
   const toggleColorMode = () =>
     setColorMode(colorMode === 'light' ? 'dark' : 'light');
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (loaded) {
       return;
     }
 
     const theme = localStorage.getItem('theme');
     if (theme && (theme === 'light' || theme === 'dark')) {
       setColorMode(theme);
-      setLoaded(true);
+    } else {
+      setColorMode("light") //if no value in localstorage present
     }
+    setLoaded(true);
   }, []);
 
   useEffect(() => {