From 9589e9ee29b7cb6148be02cd93343a7bc9c86f10 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 6 Jul 2025 13:52:06 +0200
Subject: [PATCH] Web App Modal: Set custom background to <iframe>

---
 .../modals/webApp/WebAppModalTabContent.tsx   | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/modals/webApp/WebAppModalTabContent.tsx b/src/components/modals/webApp/WebAppModalTabContent.tsx
index 38a8d17d4..b58df8bb6 100644
--- a/src/components/modals/webApp/WebAppModalTabContent.tsx
+++ b/src/components/modals/webApp/WebAppModalTabContent.tsx
@@ -1,15 +1,8 @@
 import type { FC } from '../../../lib/teact/teact';
-import type React from '../../../lib/teact/teact';
-import {
-  memo, useEffect,
-  useMemo,
-  useRef, useState,
-} from '../../../lib/teact/teact';
+import { memo, useEffect, useMemo, useRef, useState } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
-import type {
-  ApiAttachBot, ApiBotAppSettings, ApiUser,
-} from '../../../api/types';
+import type { ApiAttachBot, ApiBotAppSettings, ApiUser } from '../../../api/types';
 import type { TabState } from '../../../global/types';
 import type { BotAppPermissions, ThemeKey } from '../../../types';
 import type {
@@ -33,6 +26,7 @@ import {
 } from '../../../global/selectors';
 import { getGeolocationStatus, IS_GEOLOCATION_SUPPORTED } from '../../../util/browser/windowEnvironment';
 import buildClassName from '../../../util/buildClassName';
+import buildStyle from '../../../util/buildStyle.ts';
 import download from '../../../util/download';
 import { extractCurrentThemeParams, validateHexColor } from '../../../util/themeStyle';
 import { callApi } from '../../../api/gramjs';
@@ -189,7 +183,7 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
   const [, setFullscreen, exitFullscreen] = useFullscreen(fullscreenElementRef, exitFullScreenCallback);
 
   const activeWebApp = modal?.activeWebAppKey ? modal.openedWebApps[modal.activeWebAppKey] : undefined;
-  const activeWebAppName = activeWebApp?.appName;
+  const { appName: activeWebAppName, backgroundColor } = activeWebApp || {};
   const {
     url, buttonText, isBackButtonVisible,
   } = webApp || {};
@@ -333,7 +327,9 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
   });
 
   const sendFullScreenChangedCallback = useLastCallback(
-    (value: boolean) => { if (isActive) sendFullScreenChanged(value); },
+    (value: boolean) => {
+      if (isActive) sendFullScreenChanged(value);
+    },
   );
 
   useEffect(() => {
@@ -897,7 +893,10 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
     }
   }, [setShouldDecreaseWebFrameSize, shouldShowSecondaryButton, shouldShowMainButton]);
 
-  const frameStyle = isTransforming ? 'pointer-events: none;' : '';
+  const frameStyle = buildStyle(
+    `background-color: ${backgroundColor || 'var(--color-background)'}`,
+    isTransforming && 'pointer-events: none;',
+  );
 
   const handleBackClick = useLastCallback(() => {
     if (isBackButtonVisible) {