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:
parent
ee5d3f85ac
commit
7bbf2bb250
1 changed files with 287 additions and 12 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue