feat: support theme control via postMessage for iframe embedding - #32
Merged
Conversation
Add a window message listener to UIStore that accepts
{type: "theme:set", theme: "light"|"dark"} messages, allowing
parent windows to control the theme without reloading the iframe.
This enables seamless theme synchronization when agentsview is
embedded as a cross-origin iframe in host applications.
roborev: Combined Review (
|
cursor Bot
referenced
this pull request
in diazMelgarejo/periscope
Jun 1, 2026
## Summary
- Adds a `postMessage` listener to `UIStore` that accepts `{type:
"theme:set", theme: "light"|"dark"}` messages
- Enables parent windows to control agentsview's theme without reloading
the iframe
- Closes #31
## Details
When agentsview is embedded as a cross-origin iframe, the host
application can now send a `theme:set` message to switch themes
instantly. This avoids the jarring reload previously needed when using
the `?theme=` URL parameter approach.
The implementation is minimal — a single
`window.addEventListener("message", ...)` in the UIStore constructor.
Since `this.theme` is a `$state` field, assigning it triggers the
existing `$effect` that updates the DOM class and persists to
localStorage.
## Protocol
```js
iframe.contentWindow.postMessage({ type: "theme:set", theme: "dark" }, "*");
```
Only `"light"` and `"dark"` are accepted; other values are silently
ignored.
## Test plan
- [x] Valid `theme:set` message changes theme
- [x] Invalid theme value (e.g. "purple") is ignored
- [x] Unrelated message types are ignored
- [x] Full test suite passes (384/384, +3 new)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
postMessagelistener toUIStorethat accepts{type: "theme:set", theme: "light"|"dark"}messagesDetails
When agentsview is embedded as a cross-origin iframe, the host application can now send a
theme:setmessage to switch themes instantly. This avoids the jarring reload previously needed when using the?theme=URL parameter approach.The implementation is minimal — a single
window.addEventListener("message", ...)in the UIStore constructor. Sincethis.themeis a$statefield, assigning it triggers the existing$effectthat updates the DOM class and persists to localStorage.Protocol
Only
"light"and"dark"are accepted; other values are silently ignored.Test plan
theme:setmessage changes theme