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 style variables 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

// Use CSS variables in your styles
document.body.style.background = "var(--color-background-primary)";

// Apply when host context changes
app.onhostcontextchanged = (ctx) => {
  if (ctx.styles?.variables) {
    applyHostStyleVariables(ctx.styles.variables);
  }
};

// Apply initial styles after connecting
app.connect().then(() => {
  const ctx = app.getHostContext();
  if (ctx?.styles?.variables) {
    applyHostStyleVariables(ctx.styles.variables);
  }
});

Example: Apply to a specific element

app.onhostcontextchanged = (ctx) => {
  const container = document.getElementById("app-root");
  if (container && ctx.styles?.variables) {
    applyHostStyleVariables(ctx.styles.variables, container);
  }
};

Example: Use host style variables in CSS

body {
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}

.card {
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border-primary);
}

See

McpUiStyles for the available CSS variables
McpUiHostContext for the full host context structure