Skip to content

Goose prevents MCP Apps iframe from being transparent in dark mode #7439

@billyjanitsch

Description

@billyjanitsch

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:

  1. 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)
  2. Render it in Goose.
  3. 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).

Image Image

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions