feat(blueprintApps): forward parent theme to iframe via ?theme=light|dark#3232
Merged
Conversation
…dark
The iframe apps (agent-sandbox, trading-arena) each run their own theme
state, separate from the dapp shell. When the dapp shell is in vault
(light) mode and the iframe sub-app's default is dark, the embed renders
as a solid black rectangle on a white parent page. Visible bug on
develop.cloud.tangle.tools/blueprints/trading.
Wire the theme through the existing iframe URL contract:
- `useParentTheme()` reads `<html data-sandbox-theme>` and observes
changes, so the iframe URL updates if the user toggles theme.
- `buildBlueprintIframeUrl` accepts an optional `theme: 'light' | 'dark'`
and emits `?theme=...` on the iframe URL.
- `BlueprintAppFrame` passes the live theme on every render. Theme
changes trigger an `src` change, which the iframe respects.
Iframe apps are responsible for reading the `?theme` query param and
applying it themselves. The companion changes ship in:
- tangle-network/ai-agent-sandbox-blueprint
- tangle-network/ai-trading-blueprint
Back-compat: when `theme` is unset (existing iframe apps that haven't
shipped the reader yet), the param is omitted — iframe apps keep their
current default behavior.
tangletools
added a commit
to tangle-network/ai-trading-blueprint
that referenced
this pull request
May 24, 2026
…te (#98) The iframe at trading-arena.blueprint.tangle.tools rendered a solid black rectangle when embedded in the Tangle Cloud dapp's light (vault) mode. The dapp now publishes its theme via the iframe URL contract added in tangle-network/dapp#3232: `?theme=light|dark`. Honor that contract on first paint and fix the related empty-state gap: - ArenaDocument replaces blueprint-ui's AppDocument. Its inline theme-boot script reads `?theme=light|dark` from `window.location.search` BEFORE the React bundle hydrates, persists the value into `bp_theme` so the existing themeStore picks it up, and falls back to localStorage / prefers-color-scheme when the URL has no theme. The parent reloads the iframe on every theme change, so URL is authoritative per load — no postMessage handshake needed. An in-iframe ThemeToggle still works for that session. - entry.client.tsx mirrors the same URL check post-bundle so SPA navigations that arrive with a fresh `?theme=` also reconcile. - ConnectWalletPanel renders a theme-aware empty state on `/provision` (when the wallet isn't connected, the wizard is inert) and on the leaderboard's zero-state. Uses the existing glass-card / arena-elements-* design tokens — no hardcoded text-white / bg-black / text-gray-N. - Unit tests cover URL parsing edge cases (invalid values, malformed URIs, multiple params). Integration test for the provision wizard now seeds an isConnected mock so it reaches the wizard render path. Co-authored-by: drewstone <drewstone329@gmail.com>
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.
Visible bug: trading iframe renders as a solid black rectangle on
develop.cloud.tangle.tools/blueprints/tradingwhen the dapp shell is in vault (light) mode. The iframe sub-apps run their own theme state — they default to dark on first paint even when the parent is light.Fix (dapp side)
buildBlueprintIframeUrlacceptstheme: 'light' | 'dark'and emits?theme=...as a reserved iframe contract query param.useParentThemehook inBlueprintAppFramereads<html data-sandbox-theme>and MutationObserves it so the iframesrcupdates when the user toggles theme.Companion iframe-app changes
Iframe apps must read
?theme=and apply it. Shipping in parallel against ai-agent-sandbox-blueprint + ai-trading-blueprint.Back-compat: when
themeis unset (older iframe apps), the param is omitted; iframe apps keep their current default behavior.Test plan
yarn nx typecheck tangle-cloudcleanyarn nx test tangle-cloudcleanyarn nx lint tangle-cloudclean