> ## Documentation Index
> Fetch the complete documentation index at: https://sunpeak.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP Apps useHostStyles - React Theming Hooks

> React hooks for applying host styles in MCP Apps: useHostStyles (all-in-one), useHostStyleVariables for CSS variables, useHostFonts for typography, and useDocumentTheme for themes.

<Badge color="green">MCP Apps SDK</Badge>

```ts theme={null}
import { useHostStyles, useHostStyleVariables, useHostFonts } from "@modelcontextprotocol/ext-apps/react";
```

## useHostStyles

Convenience hook combining `useHostStyleVariables` and `useHostFonts`. Applies all host styling — CSS variables, theme, and fonts.

### Signature

```ts theme={null}
function useHostStyles(
  app: App | null,
  initialContext?: McpUiHostContext | null,
): void
```

### Usage

```tsx theme={null}
function MyApp() {
  const { app } = useApp({
    appInfo: { name: "MyApp", version: "1.0.0" },
    capabilities: {},
  });

  useHostStyles(app, app?.getHostContext());

  return (
    <div style={{ background: "var(--color-background-primary)" }}>
      Hello!
    </div>
  );
}
```

## [useHostStyleVariables](/mcp-apps/react/use-host-style-variables)

Applies host CSS variables and theme. Listens for `onhostcontextchanged` and applies updates automatically.

### Signature

```ts theme={null}
function useHostStyleVariables(
  app: App | null,
  initialContext?: McpUiHostContext | null,
): void
```

<ResponseField name="app" type="App | null" required>
  The connected `App` instance from `useApp`, or `null` during initialization.
</ResponseField>

<ResponseField name="initialContext" type="McpUiHostContext | null">
  Initial host context from `app?.getHostContext()`. Pass this to apply styles immediately on mount without waiting for the first context change notification.
</ResponseField>

### What it applies

* `styles.variables` — CSS custom properties via `applyHostStyleVariables()`
* `theme` — `data-theme` attribute and `color-scheme` via `applyDocumentTheme()`

## [useHostFonts](/mcp-apps/react/use-host-fonts)

Applies host font CSS. Listens for `onhostcontextchanged` and applies font updates automatically.

### Signature

```ts theme={null}
function useHostFonts(
  app: App | null,
  initialContext?: McpUiHostContext | null,
): void
```

### What it applies

* `styles.css.fonts` — Injected as a `<style>` tag via `applyHostFonts()`

### Usage

```tsx theme={null}
function MyApp() {
  const { app } = useApp({
    appInfo: { name: "MyApp", version: "1.0.0" },
    capabilities: {},
  });

  useHostFonts(app, app?.getHostContext());

  return <div style={{ fontFamily: "var(--font-sans)" }}>Hello!</div>;
}
```

## When to Use Which

| Hook                    | Applies                                     |
| ----------------------- | ------------------------------------------- |
| `useHostStyles`         | CSS variables + theme + fonts (recommended) |
| `useHostStyleVariables` | CSS variables + theme only                  |
| `useHostFonts`          | Fonts only                                  |

<Tip>
  The [sunpeak framework](/quickstart) provides [`useHostContext`](/app-framework/hooks/use-host-context) which auto-applies host styles in React components.
</Tip>