diff --git a/packages/vkui/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts b/packages/vkui/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts
index 6d30a818380..848116bf263 100644
--- a/packages/vkui/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts
+++ b/packages/vkui/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts
@@ -19,12 +19,18 @@ 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') {
@@ -32,7 +38,7 @@ export function useSyncHTMLWithBaseVKUIClasses({
htmlElement?.classList.remove('vkui');
}
/* eslint-disable-next-line no-restricted-properties */
- parentElement?.classList.remove('vkui__root');
+ parentElement?.classList.remove(...parentElementClasses);
};
- }, []);
+ }, [mode, enable]);
}
diff --git a/packages/vkui/src/styles/common.css b/packages/vkui/src/styles/common.css
index a8b6d6b9da3..8603e4a12a8 100644
--- a/packages/vkui/src/styles/common.css
+++ b/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 {