100mslive · hdz-666 · Oct 9, 2024 · Oct 9, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/examples/prebuilt-react-integration/package.json b/examples/prebuilt-react-integration/package.json
diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json
diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json
diff --git a/packages/hms-video-store/package.json b/packages/hms-video-store/package.json
diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json
diff --git a/packages/hms-whiteboard/package.json b/packages/hms-whiteboard/package.json
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json
diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx
@@ -221,6 +221,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                           sans: fontFamily,
                         },
                       }}
+                      container={containerSelector}
                     >
                       <PIPProvider>
                         <Init />

diff --git a/packages/roomkit-react/src/Theme/ThemeProvider.tsx b/packages/roomkit-react/src/Theme/ThemeProvider.tsx
@@ -30,6 +30,7 @@ export type ThemeProviderProps = {
   themeType?: string;
   theme?: Theme;
   aspectRatio?: { width: number; height: number };
+  container?: string;
 };
 
 const defaultContext = {
@@ -53,6 +54,7 @@ export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderPro
   themeType,
   theme: userTheme,
   aspectRatio = defaultAspectRatio,
+  container = '',
   children,
 }) => {
   const systemTheme = ThemeTypes.default;
@@ -64,13 +66,17 @@ export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderPro
     if (!isBrowser) {
       return updatedTheme;
     }
+    let element = document.querySelector(container);
+    if (!element) {
+      element = document.documentElement;
+    }
     if (previousClassName.current) {
-      document.documentElement.classList.remove(previousClassName.current);
+      element.classList.remove(previousClassName.current);
     }
     previousClassName.current = updatedTheme.className;
-    document.documentElement.classList.add(updatedTheme);
+    element.classList.add(updatedTheme);
     return updatedTheme;
-  }, [userTheme, currentTheme, isBrowser]);
+  }, [userTheme, container, currentTheme, isBrowser]);
 
   const toggleTheme = useCallback((themeToUpdateTo?: ThemeTypes) => {
     if (themeToUpdateTo) {

diff --git a/packages/roomkit-web/package.json b/packages/roomkit-web/package.json