Function applyHostStyleVariables

applyHostStyleVariables(styles: McpUiStyles, root?: HTMLElement): void
Apply host style variables as CSS custom properties on an element.

This function takes the variables object from McpUiHostContext.styles and sets each CSS variable on the specified root element (defaults to document.documentElement). This allows apps to use the host's theming values via CSS variables like var(--color-background-primary).
Parameters
- styles: McpUiStyles
  The styles object from McpUiHostContext.styles.variables
- root: HTMLElement = document.documentElement
  The element to apply styles to (defaults to document.documentElement)
Returns void
Example: Apply style variables from host context
```
import { applyHostStyleVariables } from '@modelcontextprotocol/ext-apps';

app.onhostcontextchanged = (params) => {
  if (params.styles?.variables) {
    applyHostStyleVariables(params.styles.variables);
  }
};
```
Example: Apply to a specific element
```
const container = document.getElementById('app-root');
applyHostStyleVariables(hostContext.styles?.variables, container);
```
See
- McpUiStyles for the available CSS variables
- McpUiHostContext for the full host context structure
- Defined in src/styles.ts:107