From b109accf56382b63d5b83adf2acacfa8c8c383a1 Mon Sep 17 00:00:00 2001
From: Suraj <surajahmedchoudhury@Surajs-MacBook-Air.local>
Date: Fri, 2 Jun 2023 17:16:58 +0530
Subject: [PATCH] fix: color mode warning fixes

---
 .../MultipleProvider.stories.tsx              | 10 ++++
 .../api/MultipleProvder/MultipleProvider.tsx  | 49 +++++++++++++++++++
 packages/react/src/StyledProvider.tsx         | 19 ++-----
 3 files changed, 64 insertions(+), 14 deletions(-)
 create mode 100644 example/storybook/src/api/MultipleProvder/MultipleProvider.stories.tsx
 create mode 100644 example/storybook/src/api/MultipleProvder/MultipleProvider.tsx

diff --git a/example/storybook/src/api/MultipleProvder/MultipleProvider.stories.tsx b/example/storybook/src/api/MultipleProvder/MultipleProvider.stories.tsx
new file mode 100644
index 000000000..72707266e
--- /dev/null
+++ b/example/storybook/src/api/MultipleProvder/MultipleProvider.stories.tsx
@@ -0,0 +1,10 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import { MultipleProvider } from './MultipleProvider';
+const MyMultipleProviderMeta: ComponentMeta<typeof MultipleProvider> = {
+  title: 'api/stories/MultipleProvider',
+  component: MultipleProvider,
+};
+
+export { MultipleProvider } from './MultipleProvider';
+//
+export default MyMultipleProviderMeta;
diff --git a/example/storybook/src/api/MultipleProvder/MultipleProvider.tsx b/example/storybook/src/api/MultipleProvder/MultipleProvider.tsx
new file mode 100644
index 000000000..d2e4d0b5a
--- /dev/null
+++ b/example/storybook/src/api/MultipleProvder/MultipleProvider.tsx
@@ -0,0 +1,49 @@
+import React, { memo } from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { styled } from '@gluestack-style/react';
+import { Wrapper } from '../../components/Wrapper';
+import { get, set } from '@gluestack-style/react';
+
+const StyleView = memo(
+  styled(
+    View,
+    {
+      w: 100,
+      h: 100,
+      bg: '$red500',
+
+      _dark: {
+        bg: '$info600',
+      },
+    },
+    {}
+  )
+);
+
+export function MultipleProvider() {
+  const [currentColorMode, setCurrentColorMode] = React.useState(get());
+
+  return (
+    <Wrapper colorMode={currentColorMode}>
+      <Wrapper>
+        <Pressable
+          style={{
+            backgroundColor: 'gray',
+            padding: 12,
+            marginBottom: 12,
+          }}
+          onPress={() => {
+            // set(get() === 'dark' ? 'light' : 'dark');
+            setCurrentColorMode(currentColorMode === 'dark' ? 'light' : 'dark');
+          }}
+        >
+          <Text style={{ color: 'white' }}>
+            Toggle {currentColorMode === 'dark' ? 'light' : 'dark'}
+          </Text>
+        </Pressable>
+        <StyleView />
+      </Wrapper>
+    </Wrapper>
+  );
+}
+export default MultipleProvider;
diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx
index 6f9ac5ce3..0cfa49415 100644
--- a/packages/react/src/StyledProvider.tsx
+++ b/packages/react/src/StyledProvider.tsx
@@ -7,29 +7,20 @@ import { platformSpecificSpaceUnits } from './utils';
 import { createGlobalStylesWeb } from './createGlobalStylesWeb';
 
 type Config = any;
+let colorModeSet = false;
 
 export const defaultConfig: { config: Config; colorMode: COLORMODES } = {
   config: {},
   colorMode: 'light',
 };
 
-// interface ConfigContextData {
-//   config: Config;
-//   setConfig: (config: Config) => void;
-// }
-
 const defaultContextData: Config = defaultConfig;
-
 const StyledContext = React.createContext<Config>(defaultContextData);
 
-// type IContext = {
-//   config: Config;
-//   colorMode?: COLORMODES;
-// };
-
 const setCurrentColorModeForWeb = (currentColorMode: string) => {
   if (Platform.OS === 'web' && currentColorMode) {
     set(currentColorMode === 'dark' ? 'dark' : 'light');
+    colorModeSet = true;
   }
 };
 export const StyledProvider: React.FC<{
@@ -58,7 +49,7 @@ export const StyledProvider: React.FC<{
     if (Platform.OS === 'web') {
       document.documentElement.classList.add(`gs`);
     }
-    setCurrentColorModeForWeb(currentColorMode);
+    // setCurrentColorModeForWeb(currentColorMode);
 
     onChange((currentColor: string) => {
       // only for web
@@ -78,8 +69,8 @@ export const StyledProvider: React.FC<{
     setCurrentColorModeForWeb(currentColorMode);
   }, [currentColorMode]);
 
-  // Set colormode server side
-  if (typeof window === 'undefined') {
+  // Set colormode for the first time
+  if (!colorModeSet) {
     setCurrentColorModeForWeb(currentColorMode);
   }