feat(basic-host): Add theme toggle and MCP style variables (#336)

* feat(basic-host): add theme toggle and MCP style variables

Add theme support to basic-host example:
- theme.ts: Global theme manager with light/dark toggle
- host-styles.ts: Full set of MCP CSS variables using light-dark()
- ThemeToggle component with sun/moon icons
- Theme-aware CSS using CSS custom properties
- Pass theme + styles to apps via hostContext
- Notify apps when theme changes via sendHostContextChange

Apps now receive:
- hostContext.theme: 'light' | 'dark'
- hostContext.styles.variables: All 60+ MCP CSS variables
- onhostcontextchanged notifications when theme changes

* test: update e2e goldens for theme changes
This commit is contained in:
Olivier Chafik 2026-01-23 20:41:26 +00:00 • committed by GitHub
commit 7bbf2bb250
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -12,6 +12,8 @@
margin: 0;
height: 100vh;
width: 100vw;
/* Transparent background allows parent page to show through */
background-color: transparent;
}
body {
display: flex;
@ -26,6 +28,8 @@
padding: 0px;
overflow: hidden;
flex-grow: 1;
/* Inherit color scheme from parent for consistent transparency */
color-scheme: inherit;
}
</style>
</head>