The current theme ("light" or "dark")
import { useDocumentTheme } from '@modelcontextprotocol/ext-apps/react';
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>
);
}
React hook that provides the current document theme reactively.
Uses a MutationObserver to watch for changes to the
data-themeattribute orclassondocument.documentElement. When the theme changes (e.g., from host context updates), the hook automatically re-renders your component with the new theme value.