-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Goose prevents MCP Apps iframe from being transparent in dark mode #7439
Description
Describe the bug
Iframes are transparent by default, but when the color-scheme of the frame's document isn't declared as supported by the parent, the iframe becomes opaque. See https://fvsch.com/transparent-iframes for more details.
Goose doesn't set color-scheme of its document. Instead, it uses a dark class to toggle between light and dark mode. This means that an MCP app that declares color-scheme: dark always becomes opaque. This makes it impossible for the app to match the background of the chat window, which is especially relevant for prefersBorder: false apps.
The fix is to add <meta name="color-scheme" content="light dark" /> (or equivalent) to the Goose document to declare that both color schemes are supported by child frames.
To Reproduce
Steps to reproduce the behavior:
- Create an MCP app with
<meta name="color-scheme" content="light dark" />in the HTML head that does not overwrite its background color (i.e., preserves the default transparency) - Render it in Goose.
- Toggle Goose between light and dark mode.
Expected behavior
The iframe is transparent in both light and dark mode. Currently, the iframe is transparent in light mode, but opaque in dark mode.
Screenshots
To demonstrate the issue clearly, I've manually set background: blue on the container that Goose renders the iframe inside of. Note that in light mode, the blue container background is visible (since the iframe is transparent), whereas in dark mode, it's not (since the iframe is opaque).
Please provide the following information
- OS & Arch: macOS 15.7.4 arm64
- Interface: UI
- Version: 1.25.0
- Extensions enabled: MCP Apps
- Provider & Model: n/a
Additional context
Add any other context about the problem here.