Follow Discord
Sweep 22 Oct 2026 · 21:04Z Build v2.1.309 528 read Stable v2.1.308 Latest v2.1.308 Next v2.1.309 Feeds RSS JSON llms.txt llms-full.txt Unofficial
HomeDocsClaude Documentation 25 Sep 2026
One change · claude-docs

Blend your MCP App with Claude's theme changedconnectors/building/mcp-apps/transparent-theming

Nearest release: v2.1.283, published under an hour after upstream edited the page. Shown because the two are within 24 hours of each other. Nothing here says the release caused the edit.

Upstream edited this page at 25 Sep 2026 18:00 UTC, give or take a minute or two: the time comes from Anthropic’s own sitemap rather than from a commit. This site recorded the change at 22 Oct 2026 18:07 UTC.

Upstream edited
Recorded here
Lines+5added
Lines−5removed
From line 2 where the diff opens
First seen 14 Aug 2026 this site's first read of the page
Recorded edits5to this page, all time

The whole hunk

from line 2, old and new numbered
/
lines
from line 2
22 
33> Make your MCP App's background transparent and style it with Claude's host style variables so it blends into the conversation in light and dark mode.
44 
5Claude renders MCP Apps inside a sandboxed iframe, and every frame between your widget and the chat surface already has a transparent background so the conversation can show through. If you leave your own background transparent and style text and borders with the host's [style variables](/docs/connectors/building/mcp-apps/design-guidelines#style-variables), your app looks like part of the conversation rather than an embedded box. It also follows the user's light or dark mode automatically.
5Claude renders MCP Apps inside a sandboxed iframe, and every frame between your widget and the chat surface already has a transparent background so the conversation can show through. If you leave your own background transparent and style text and borders with the host's [style variables](/docs/connectors/building/mcp-apps/design-guidelines.md#style-variables), your app looks like part of the conversation rather than an embedded box. It also follows the user's light or dark mode automatically.
66 
77This page is for developers who already have an MCP App rendering in Claude and want it to match the host theme. The snippets assume you have registered a UI resource and created an `App` instance from `@modelcontextprotocol/ext-apps`. If you haven't, start with the [SDK Quickstart](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html). To match the host theme, [let the host background show through](#let-the-host-background-show-through), then [apply the host style variables](#apply-the-host-style-variables) at runtime.
88 
from line 68
6868| `styles.variables` | CSS custom properties: `--color-background-*`, `--color-text-*`, `--color-border-*`, `--color-ring-*`, `--font-*`, `--border-radius-*`, `--border-width-*` |
6969| `styles.css.fonts` | `@font-face` rules for Anthropic Sans, served from `https://assets.claude.ai` |
7070 
71The [Style variables](/docs/connectors/building/mcp-apps/design-guidelines#style-variables) section of the design guidelines lists every variable and its light- and dark-mode value.
71The [Style variables](/docs/connectors/building/mcp-apps/design-guidelines.md#style-variables) section of the design guidelines lists every variable and its light- and dark-mode value.
7272 
7373### Read `hostContext` and listen for changes
7474 
from line 150
150150 
151151## Next steps
152152 
153* [Style variables](/docs/connectors/building/mcp-apps/design-guidelines#style-variables): the full variable palette in the design guidelines
154* [Visual design](/docs/connectors/building/mcp-apps/design-guidelines#visual-design): usage guidance for color, typography, and spacing in the design guidelines
155* [Supersede older widget instances](/docs/connectors/building/mcp-apps/instance-supersession): keep only the newest copy of your widget active in a conversation
153* [Style variables](/docs/connectors/building/mcp-apps/design-guidelines.md#style-variables): the full variable palette in the design guidelines
154* [Visual design](/docs/connectors/building/mcp-apps/design-guidelines.md#visual-design): usage guidance for color, typography, and spacing in the design guidelines
155* [Supersede older widget instances](/docs/connectors/building/mcp-apps/instance-supersession.md): keep only the newest copy of your widget active in a conversation
156156* [SDK API reference](https://modelcontextprotocol.github.io/ext-apps/api/index.html): `App`, `McpUiHostContext`, and `McpUiResourceMeta`
157157 
Feedback