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 20 Oct 2026 18:07 UTC.
Upstream edited
Recorded here
Lines+35added
Lines−37removed
From line
86
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 86, old and new numbered
/
from line 86
8686
8787This example applies the theme, variables, and fonts on connect and again on every host context change:
8888
89<CodeGroup>
90 ```ts TypeScript theme={null}
91 import {
92 App,
93 applyDocumentTheme,
94 applyHostFonts,
95 applyHostStyleVariables,
96 type McpUiHostContext,
97 } from "@modelcontextprotocol/ext-apps";
89```ts TypeScript theme={null}
90import {
91 App,
92 applyDocumentTheme,
93 applyHostFonts,
94 applyHostStyleVariables,
95 type McpUiHostContext,
96} from "@modelcontextprotocol/ext-apps";
9897
99 function applyHostContext(ctx: Partial<McpUiHostContext>) {
100 if (ctx.theme) applyDocumentTheme(ctx.theme);
101 if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables);
102 if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts);
103 }
98function applyHostContext(ctx: Partial<McpUiHostContext>) {
99 if (ctx.theme) applyDocumentTheme(ctx.theme);
100 if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables);
101 if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts);
102}
104103
105 const app = new App({ name: "my-app", version: "1.0.0" });
104const app = new App({ name: "my-app", version: "1.0.0" });
106105
107 // Updates carry only the fields that changed.
108 app.addEventListener("hostcontextchanged", (changed) => applyHostContext(changed));
106// Updates carry only the fields that changed.
107app.addEventListener("hostcontextchanged", (changed) => applyHostContext(changed));
109108
110 await app.connect();
111 const initial = app.getHostContext();
112 if (initial) applyHostContext(initial);
113 ```
109await app.connect();
110const initial = app.getHostContext();
111if (initial) applyHostContext(initial);
112```
114113
115 ```tsx React theme={null}
116 import { useApp, useHostStyles } from "@modelcontextprotocol/ext-apps/react";
114```tsx React theme={null}
115import { useApp, useHostStyles } from "@modelcontextprotocol/ext-apps/react";
117116
118 function Widget() {
119 const { app } = useApp({
120 appInfo: { name: "my-app", version: "1.0.0" },
121 capabilities: {},
122 });
123 // Applies theme + CSS variables + fonts, and re-applies on host-context-changed.
124 useHostStyles(app, app?.getHostContext());
125 return <div className="card">…</div>;
126 }
127 ```
128</CodeGroup>
117function Widget() {
118 const { app } = useApp({
119 appInfo: { name: "my-app", version: "1.0.0" },
120 capabilities: {},
121 });
122 // Applies theme + CSS variables + fonts, and re-applies on host-context-changed.
123 useHostStyles(app, app?.getHostContext());
124 return <div className="card">…</div>;
125}
126```
129127
130128### Reference the variables in your CSS
131129
from line 140
142140}
143141```
144142
145<Note>
146 Claude's token values use CSS `light-dark()`, so once `applyDocumentTheme` has set the root `color-scheme`, every `--color-*` variable resolves to the right variant without any `[data-theme]` selectors on your side.
147</Note>
143> [!NOTE]
144>
145> Claude's token values use CSS `light-dark()`, so once `applyDocumentTheme` has set the root `color-scheme`, every `--color-*` variable resolves to the right variant without any `[data-theme]` selectors on your side.
148146
149147### Allow the host font origin in your CSP
150148
No line in this hunk matches that.