fix: Use the form background behind the fullscreen mobile popup

packages/embed/src/css/popup.scss

@@ -34,6 +34,7 @@
 @include mobile {
   .tf-v1-popup {
     @include fullsize;
+    background: var(--tf-popup-background, rgba(0, 0, 0, 0.75));
 
     .tf-v1-iframe-wrapper {
       position: relative;

packages/embed/src/factories/create-popup/create-popup.spec.ts

@@ -41,6 +41,26 @@ describe('create-popup', () => {
         expect(wrapper.style.width).toBe('200px')
         expect(wrapper.style.height).toBe('100px')
       })
+
+      it('should set the popup background from the form theme', () => {
+        const popupElement = container.querySelector('.tf-v1-popup') as HTMLElement
+        const iframe = popupElement.querySelector('iframe') as HTMLIFrameElement
+        const embedId = new URL(iframe.src).searchParams.get('typeform-embed-id')
+
+        window.dispatchEvent(
+          new MessageEvent('message', {
+            data: { type: 'form-theme', embedId: 'other-embed-id', theme: { backgroundColor: 'rgba(0, 0, 255, 0)' } },
+          })
+        )
+        expect(popupElement.style.getPropertyValue('--tf-popup-background')).toBe('')
+
+        window.dispatchEvent(
+          new MessageEvent('message', {
+            data: { type: 'form-theme', embedId, theme: { backgroundColor: 'rgba(255, 200, 0, 0)' } },
+          })
+        )
+        expect(popupElement.style.getPropertyValue('--tf-popup-background')).toBe('rgba(255, 200, 0, 255)')
+      })
     })
 
     describe('#close', () => {

packages/embed/src/factories/create-popup/create-popup.ts

@@ -10,8 +10,10 @@ import {
   invokeWithoutDefault,
   handlePreventReopenOnClose,
   closeIconSvg,
+  changeColorOpacity,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
+import { getFormThemeHandler } from '../../utils/create-iframe/get-form-event-handler'
 import { POPUP_SIZE } from '../../constants'
 import { isInPage, isOpen } from '../../utils'
 import { EmbedPopup } from '../../base'
@@ -84,6 +86,16 @@ export const createPopup = (formId: string, userOptions: PopupOptions = {}): Pop
   popup.append(spinner)
   popup.append(wrapper)
 
+  window.addEventListener(
+    'message',
+    getFormThemeHandler(embedId, (data) => {
+      const backgroundColor = data?.theme?.backgroundColor
+      if (backgroundColor) {
+        popup.style.setProperty('--tf-popup-background', changeColorOpacity(backgroundColor))
+      }
+    })
+  )
+
   const container = options.container || document.body
 
   iframe.onload = (event) => {