MCP Apps useDocumentTheme - Theme Hook

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.

Overview

App

MCP

React

Server

Styling

Types

MCP Apps useDocumentTheme - Theme Hook

Overview

Signature

Returns

Usage

How It Works

​Overview

​Signature

​Returns

​Usage

​How It Works

Overview

Signature

Returns

Usage

How It Works