Merge pull request #1617 from gluestack/release/@gluestack-style/reac…

…[email protected] Release/@gluestack style/[email protected]
gluestack · Jan 11, 2024 · 20e69fc · 20e69fc
2 parents 2a5d535 + 5caf293
commit 20e69fc
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 31 deletions.
diff --git a/packages/styled/react/CHANGELOG.md b/packages/styled/react/CHANGELOG.md
@@ -1,10 +1,16 @@
 # @gluestack-style/react
 
+## 1.0.37
+
+### Patch Changes
+
+- # Color mode switch issue fixes
+
 ## 1.0.36
 
 ### Patch Changes
 
-- - Fixed data theme id attribute
+- Fixed data theme id attribute
 
 ## 1.0.35
 

diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/styled/react/src/StyledProvider.tsx b/packages/styled/react/src/StyledProvider.tsx
@@ -17,6 +17,7 @@ import { resolveThemes } from './createConfig';
 
 type Config = any;
 let colorModeSet = false;
+let rootId = '';
 
 export const defaultConfig: {
   config: Config;
@@ -33,7 +34,6 @@ const StyledContext = React.createContext<Config>(defaultContextData);
 
 const setCurrentColorMode = (inputColorMode: string | undefined) => {
   if (inputColorMode) {
-    // console.log(get(), '>>>>>>');
     const currentColorMode = get();
     if (currentColorMode !== inputColorMode) {
       set(inputColorMode);
@@ -66,8 +66,13 @@ export const StyledProvider: React.FC<{
 
   const { themes } = useTheme();
   const styledContext = useStyled();
-  const isParentProviderExist =
-    Object.keys(styledContext?.config).length > 0 ? true : false;
+  const id = React.useId();
+
+  if (rootId === '') {
+    rootId = id;
+  }
+
+  const isRootProvider = rootId === id;
 
   const themeContextValue = React.useMemo(() => {
     if (colorMode) {
@@ -137,55 +142,47 @@ export const StyledProvider: React.FC<{
     // Add gs class name
     if (Platform.OS === 'web') {
       documentElement.classList.add(`gs`);
-
-      if (currentColorMode) {
-        if (!isParentProviderExist) {
+      if (isRootProvider) {
+        if (currentColorMode) {
           documentElement
             .querySelector('body')
             ?.setAttribute('data-theme-id', currentColorMode);
           documentElement.classList.add(`gs-${currentColorMode}`);
-        }
-      } else {
-        if (!isParentProviderExist) {
+        } else {
           documentElement.classList.add(`gs-light`);
         }
       }
     }
-
     onChange((currentColor: string) => {
       // only for web
       if (Platform.OS === 'web' && !_experimentalNestedProvider) {
         const documentElement = document.documentElement;
-
-        if (Platform.OS === 'web') {
+        if (isRootProvider) {
           if (currentColor) {
             if (currentColor === 'dark') {
-              if (!isParentProviderExist) {
-                documentElement
-                  .querySelector('body')
-                  ?.setAttribute('data-theme-id', 'dark');
-                documentElement.classList.remove(`gs-light`);
-              }
+              documentElement
+                .querySelector('body')
+                ?.setAttribute('data-theme-id', 'dark');
+              documentElement.classList.remove(`gs-light`);
             } else {
-              if (!isParentProviderExist) {
-                documentElement
-                  .querySelector('body')
-                  ?.setAttribute('data-theme-id', 'light');
-                documentElement.classList.remove(`gs-dark`);
-              }
-            }
-            if (!isParentProviderExist) {
-              documentElement.classList.add(`gs-${currentColor}`);
+              documentElement
+                .querySelector('body')
+                ?.setAttribute('data-theme-id', 'light');
+              documentElement.classList.remove(`gs-dark`);
             }
+            documentElement.classList.add(`gs-${currentColor}`);
           }
         }
       }
     });
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   React.useEffect(() => {
-    setCurrentColorMode(currentColorMode);
+    if (isRootProvider) {
+      setCurrentColorMode(currentColorMode);
+    }
   }, [currentColorMode]);
 
   useSafeLayoutEffect(() => {
@@ -224,7 +221,7 @@ export const StyledProvider: React.FC<{
     }
   });
   // // Set colormode for the first time
-  if (!colorModeSet) {
+  if (!colorModeSet && isRootProvider) {
     setCurrentColorMode(currentColorMode);
   }
 
@@ -239,6 +236,7 @@ export const StyledProvider: React.FC<{
       animationDriverData,
       setAnimationDriverData,
       inlineStyleMap: inlineStyleMap.current,
+      isConfigSet: true,
     };
 
     if (_experimentalNestedProvider) {