Skip to main content
MCP Apps SDK 
import { useDocumentTheme } from "@modelcontextprotocol/ext-apps/react";

​
Overview

useDocumentTheme provides the current document theme reactively. It watches document.documentElement for changes to the data-theme attribute or class using a MutationObserver, and re-renders your component when the theme changes.

​
Signature

function useDocumentTheme(): McpUiTheme

​
Returns

​
return
'light' | 'dark'
The current document theme.

​
Usage

function MyApp() {
  const theme = useDocumentTheme();

  return (
    <div>
      {theme === "dark" ? <DarkIcon /> : <LightIcon />}
    </div>
  );
}

function ThemedButton() {
  const theme = useDocumentTheme();

  return (
    <button
      style={{
        background: theme === "dark" ? "#333" : "#fff",
        color: theme === "dark" ? "#fff" : "#333",
      }}
    >
      Click me
    </button>
  );
}

​
How It Works

The hook uses MutationObserver to watch for:
  • Changes to data-theme attribute (set by applyDocumentTheme)
  • Changes to class attribute (Tailwind CSS dark class convention)
The observer is automatically disconnected when the component unmounts.
In most cases, prefer using CSS variables (var(--color-background-primary)) or [data-theme="dark"] selectors instead of this hook. Reserve useDocumentTheme for logic that must branch on the theme value (e.g., choosing between different chart color palettes).
The sunpeak framework provides useTheme for reactive theme access in React components.