Specify background explicitly

For .vkui in full mode
For .vkui__root--embedded in embedded mode

To avoid issues with background if someone is
using .vkui__root class

packages/vkui/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts

@@ -19,20 +19,26 @@ export function useSyncHTMLWithBaseVKUIClasses({
     const htmlElement = appRootRef.current?.ownerDocument.documentElement;
     const parentElement = appRootRef.current?.parentElement ?? null;
 
+    const parentElementClasses = ['vkui__root'];
+
+    if (mode === 'embedded') {
+      parentElementClasses.push('vkui__root--embedded');
+    }
+
     if (mode === 'full') {
       /* eslint-disable-next-line no-restricted-properties */
       htmlElement?.classList.add('vkui');
     }
     /* eslint-disable-next-line no-restricted-properties */
-    parentElement?.classList.add('vkui__root');
+    parentElement?.classList.add(...parentElementClasses);
 
     return () => {
       if (mode === 'full') {
         /* eslint-disable-next-line no-restricted-properties */
         htmlElement?.classList.remove('vkui');
       }
       /* eslint-disable-next-line no-restricted-properties */
-      parentElement?.classList.remove('vkui__root');
+      parentElement?.classList.remove(...parentElementClasses);
     };
-  }, []);
+  }, [mode, enable]);
 }

packages/vkui/src/styles/common.css

@@ -26,6 +26,9 @@
   padding: 0;
   block-size: 100%;
   color-scheme: var(--vkui--colors_scheme);
+}
+
+.vkui {
   /*
    * TODO [>=8]: Убрать background с html элемента, но для этого надо
    * чтобы height у всех родителей Panel вплоть до html имели
@@ -42,6 +45,10 @@
   max-block-size: inherit;
 }
 
+.vkui__root--embedded {
+  background: var(--vkui--color_background);
+}
+
 /* отключаем нативный pull-to-refresh при взаимодействии с компонентом
  * PullToRefresh или при открывании модалки */
 .vkui--disable-overscroll-behavior {