diff --git a/packages/styled/react/CHANGELOG.md b/packages/styled/react/CHANGELOG.md
index cfe16a1572..169d61dfc2 100644
--- a/packages/styled/react/CHANGELOG.md
+++ b/packages/styled/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 1.0.36
+
+### Patch Changes
+
+- - Fixed data theme id attribute
+
 ## 1.0.35
 
 ### Patch Changes
diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json
index da07054d9e..8e3ec37384 100644
--- 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.35",
+  "version": "1.0.36",
   "keywords": [
     "React Native",
     "Next.js",
diff --git a/packages/styled/react/src/StyledProvider.tsx b/packages/styled/react/src/StyledProvider.tsx
index 49ee354a16..8093f664e9 100644
--- a/packages/styled/react/src/StyledProvider.tsx
+++ b/packages/styled/react/src/StyledProvider.tsx
@@ -66,7 +66,8 @@ export const StyledProvider: React.FC<{
 
   const { themes } = useTheme();
   const styledContext = useStyled();
-  const isParentProviderExist = styledContext?.config ? true : false;
+  const isParentProviderExist =
+    Object.keys(styledContext?.config).length > 0 ? true : false;
 
   const themeContextValue = React.useMemo(() => {
     if (colorMode) {
@@ -139,7 +140,9 @@ export const StyledProvider: React.FC<{
 
       if (currentColorMode) {
         if (!isParentProviderExist) {
-          document.body.setAttribute('data-theme-id', currentColorMode);
+          documentElement
+            .querySelector('body')
+            ?.setAttribute('data-theme-id', currentColorMode);
           documentElement.classList.add(`gs-${currentColorMode}`);
         }
       } else {
@@ -158,14 +161,18 @@ export const StyledProvider: React.FC<{
           if (currentColor) {
             if (currentColor === 'dark') {
               if (!isParentProviderExist) {
-                document.body.setAttribute('data-theme-id', 'dark');
+                documentElement
+                  .querySelector('body')
+                  ?.setAttribute('data-theme-id', 'dark');
+                documentElement.classList.remove(`gs-light`);
               }
-              documentElement.classList.remove(`gs-light`);
             } else {
               if (!isParentProviderExist) {
-                document.body.setAttribute('data-theme-id', 'light');
+                documentElement
+                  .querySelector('body')
+                  ?.setAttribute('data-theme-id', 'light');
+                documentElement.classList.remove(`gs-dark`);
               }
-              documentElement.classList.remove(`gs-dark`);
             }
             if (!isParentProviderExist) {
               documentElement.classList.add(`gs-${currentColor}`);