7bbf2bb250* 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
40 lines
794 B
CSS
40 lines
794 B
CSS
:root {
|
|
color-scheme: light dark;
|
|
|
|
/* Light theme (default) */
|
|
--color-bg: #ffffff;
|
|
--color-bg-secondary: #f5f5f5;
|
|
--color-text: #1f2937;
|
|
--color-text-secondary: #6b7280;
|
|
--color-border: #e5e7eb;
|
|
--color-primary: #1e3a5f;
|
|
--color-primary-hover: #2d4a7c;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-bg: #1a1a1a;
|
|
--color-bg-secondary: #2d2d2d;
|
|
--color-text: #f3f4f6;
|
|
--color-text-secondary: #9ca3af;
|
|
--color-border: #404040;
|
|
--color-primary: #3b82f6;
|
|
--color-primary-hover: #60a5fa;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
font-size: 1rem;
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
transition: background-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
code {
|
|
font-size: 1em;
|
|
}
|