---
title: "<ThemeProvider />"
description: "Theme provider component for consistent theme management across widgets"
icon: "palette"
---

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

