Skip to main content
import { useDocumentTheme } from "sunpeak";

​
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).