From 7261f7905757354505734d8404a8f4d1a7adb8ef Mon Sep 17 00:00:00 2001
From: Erwan Leboucher <erwanleboucher@gmail.com>
Date: Fri, 31 Jul 2026 09:23:42 +0200
Subject: [PATCH] fix(call): apply Sable theme to Element Call iframe

The call embed iframe was not reflecting the Sable theme:

- Remote/custom themes: ThemeManager injects theme CSS asynchronously into
  a <style> in document.head. The call's MutationObserver only watched
  documentElement and body attributes, so updateInjectedCSS never re-ran
  when the remote theme stylesheet arrived. Observe document.head so
  resolved variable values are picked up.
- EC gradient body background: Element Call defaults to background=gradient
  which paints an SVG gradient via body[data-background="gradient"]::before.
  Pass background=solid in the widget URL params.
- Iframe html dot pattern: syncStyles copies the app's own html, body
  rule (dot pattern) into the iframe. Clear documentElement background
  alongside body.
- EC stylesheet cascade: Element Call loads its own stylesheets into the
  iframe after our injection, and uses !important at the same specificity
  as our overrides. Keep our injected <style> last in the iframe head
  and observe iframe head so our overrides keep winning the cascade.
---
 src/app/plugins/call/CallEmbed.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/plugins/call/CallEmbed.ts b/src/app/plugins/call/CallEmbed.ts
index 8ba2c27878..edde57b3e9 100644
--- a/src/app/plugins/call/CallEmbed.ts
+++ b/src/app/plugins/call/CallEmbed.ts
@@ -132,6 +132,7 @@ export class CallEmbed {
       perParticipantE2EE: room.hasEncryptionStateEvent().toString(),
       lang: 'en-EN',
       theme: themeKind,
+      background: 'solid',
       header: 'none',
     });
 
@@ -446,6 +447,7 @@ export class CallEmbed {
     const doc = this.document;
     if (!doc) return;
 
+    doc.documentElement.style.setProperty('background', 'none', 'important');
     doc.body.style.setProperty('background', 'none', 'important');
 
     // Copy stylesheets from parent just in case
@@ -757,6 +759,7 @@ export class CallEmbed {
           font-family: ${appFontFamily} !important;
         }
       `;
+      if (doc.head.lastChild !== styleEl) doc.head.appendChild(styleEl);
     };
 
     // Sync theme classes from parent html/body
@@ -783,7 +786,12 @@ export class CallEmbed {
       attributes: true,
       attributeFilter: ['class', 'data-theme', 'style'],
     });
+    observer.observe(document.head, { childList: true, subtree: true });
     this.disposables.push(() => observer.disconnect());
+
+    const iframeHeadObserver = new MutationObserver(syncThemeClasses);
+    iframeHeadObserver.observe(doc.head, { childList: true });
+    this.disposables.push(() => iframeHeadObserver.disconnect());
   }
 
   private onEvent(ev: MatrixEvent): void {