Skip to content

fix(call): re-evaluate injected CSS when remote theme styles load - #1528

Merged
nushea merged 1 commit into
devfrom
fix/call-remote-theme-sync
Jul 31, 2026
Merged

fix(call): re-evaluate injected CSS when remote theme styles load#1528
nushea merged 1 commit into
devfrom
fix/call-remote-theme-sync

Conversation

@eleboucher

Copy link
Copy Markdown
Member

Description

Fixes #

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

AI disclosure:

  • Partially AI assisted (clarify which code was AI assisted and briefly explain what it does).
  • Fully AI generated (explain what all the generated code does in moderate detail).

@eleboucher
eleboucher force-pushed the fix/call-remote-theme-sync branch from 3903c20 to aa3dfaf Compare July 31, 2026 07:23
@eleboucher
eleboucher marked this pull request as ready for review July 31, 2026 07:24
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.
@eleboucher
eleboucher force-pushed the fix/call-remote-theme-sync branch from aa3dfaf to 7261f79 Compare July 31, 2026 07:26
@github-actions

Copy link
Copy Markdown
Contributor

Deploying with  Cloudflare Workers  Cloudflare Workers

Status Preview URL Commit Alias Updated (UTC)
✅ Deployment successful! https://pr-1528-sable.raspy-dream-bb1d.workers.dev 7261f79 pr-1528 Fri, 31 Jul 2026 07:28:11 GMT

nushea

This comment was marked as resolved.

@nushea
nushea added this pull request to the merge queue Jul 31, 2026
Merged via the queue into dev with commit 79fbfa8 Jul 31, 2026
13 checks passed
@nushea
nushea deleted the fix/call-remote-theme-sync branch July 31, 2026 07:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants