fix: color mode warning fixes

gluestack · Jun 2, 2023 · 9e4d60d · 9e4d60d
1 parent 7c644bb
commit 9e4d60d
Showing 1 changed file with 17 additions and 17 deletions.
diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx
@@ -26,6 +26,12 @@ const StyledContext = React.createContext<Config>(defaultContextData);
 //   config: Config;
 //   colorMode?: COLORMODES;
 // };
+
+const setCurrentColorModeForWeb = (currentColorMode: string) => {
+  if (Platform.OS === 'web' && currentColorMode) {
+    set(currentColorMode === 'dark' ? 'dark' : 'light');
+  }
+};
 export const StyledProvider: React.FC<{
   config: Config;
   colorMode?: COLORMODES;
@@ -48,6 +54,12 @@ export const StyledProvider: React.FC<{
   }, [colorMode]);
 
   React.useEffect(() => {
+    // Add gs class name
+    if (Platform.OS === 'web') {
+      document.documentElement.classList.add(`gs`);
+    }
+    setCurrentColorModeForWeb(currentColorMode);
+
     onChange((currentColor: string) => {
       // only for web
       if (Platform.OS === 'web') {
@@ -59,29 +71,17 @@ export const StyledProvider: React.FC<{
         document.documentElement.classList.add(`gs-${currentColor}`);
       }
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  React.useEffect(() => {
-    if (currentColorMode) {
-      set(currentColorMode === 'dark' ? 'dark' : 'light');
-    }
-
-    if (Platform.OS === 'web') {
-      document.documentElement.classList.add(`gs-${get()}`);
-    }
-  }, [currentColorMode]);
 
   React.useEffect(() => {
-    if (Platform.OS === 'web') {
-      document.documentElement.classList.add(`gs`);
-    }
-  }, []);
+    setCurrentColorModeForWeb(currentColorMode);
+  }, [currentColorMode]);
 
   // Set colormode server side
-  // if (typeof window === 'undefined') {
-  if (Platform.OS === 'web' && currentColorMode) {
-    set(currentColorMode === 'dark' ? 'dark' : 'light');
+  if (typeof window === 'undefined') {
+    setCurrentColorModeForWeb(currentColorMode);
   }
-  // }
 
   let contextValue;
   if (Platform.OS === 'web') {