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

# <ThemeProvider />

> Theme provider component for consistent theme management across widgets

The `ThemeProvider` component manages dark mode by setting the `dark` class on the document root. It prioritizes the widget theme from OpenAI Apps SDK, falling back to system preference if the widget API is not available.

<Tip>
  You can use `<McpUseProvider />` to automatically include the `<ThemeProvider />` component.
</Tip>

## Import

```typescript theme={null}
import { ThemeProvider } from 'mcp-use/react';
```

## Props

| Prop       | Type              | Default      | Description                |
| ---------- | ----------------- | ------------ | -------------------------- |
| `children` | `React.ReactNode` | **required** | The widget content to wrap |

## Theme Priority

The provider uses the following priority:

1. **Widget theme** (from `window.openai.theme`) - When Apps SDK is available
2. **System preference** (`prefers-color-scheme: dark`) - Fallback when widget API is not available

## Basic Usage

```tsx theme={null}
import { ThemeProvider } from 'mcp-use/react';

function MyWidget() {
  return (
    <ThemeProvider>
      <div>My widget content</div>
    </ThemeProvider>
  );
}
```

## Theme Synchronization

The provider:

* **Syncs with ChatGPT**: Automatically matches ChatGPT's theme when running in Apps SDK
* **Listens to system changes**: Updates when user changes system theme preference
* **Prevents flash**: Uses `useLayoutEffect` to apply theme synchronously before browser paint

## Related Components

* [`McpUseProvider`](./mcpuseprovider) - Includes ThemeProvider automatically
* [`useWidget`](./usewidget) - Hook for accessing theme and other widget data