From df7d12ae213dff6462710d6e3a3714cedf51ec5e Mon Sep 17 00:00:00 2001
From: Junaid Shaikh <junaidshaikh3967@gmail.com>
Date: Mon, 7 Oct 2024 16:55:53 +0530
Subject: [PATCH] Issue#51 Fix flickering issue in dark mode during website
 load

---
 packages/docs-ui/src/providers/ColorMode/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/docs-ui/src/providers/ColorMode/index.tsx b/packages/docs-ui/src/providers/ColorMode/index.tsx
index b7ead99d..8b86cf2e 100644
--- 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,7 +23,7 @@ export const ColorModeProvider = ({ children }: ColorModeProviderProps) => {
   const toggleColorMode = () =>
     setColorMode(colorMode === 'light' ? 'dark' : 'light');
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (loaded) {
       return;
     }
@@ -31,8 +31,10 @@ export const ColorModeProvider = ({ children }: ColorModeProviderProps) => {
     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(() => {