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

Browse source

* 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

parent ee5d3f85ac

commit 7bbf2bb250

No known key found for this signature in database

GPG key ID: B5690EEEBB952194

3 changed files with 287 additions and 12 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download patch file Download diff file Expand all files Collapse all files

BIN

tests/e2e/servers.spec.ts-snapshots/basic-react.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 47 KiB After Width:  |  Height:  |  Size: 46 KiB

BIN

tests/e2e/servers.spec.ts-snapshots/basic-vanillajs.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 47 KiB After Width:  |  Height:  |  Size: 47 KiB

BIN

tests/e2e/servers.spec.ts-snapshots/integration.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 48 KiB After Width:  |  Height:  |  Size: 44 KiB