Skip to main content
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.
You can use <McpUseProvider /> to automatically include the <ThemeProvider /> component.

​
Import

import { ThemeProvider } from 'mcp-use/react';

​
Props

PropTypeDefaultDescription
childrenReact.ReactNoderequiredThe 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

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