45 lines
1.4 KiB
Plaintext
45 lines
1.4 KiB
Plaintext
import { McpUiTheme } from "../types.js";
|
|
/**
|
|
* React hook that provides the current document theme reactively.
|
|
*
|
|
* Uses a `MutationObserver` to watch for changes to the `data-theme` attribute
|
|
* or `class` on `document.documentElement`. When the theme changes (e.g., from
|
|
* host context updates), the hook automatically re-renders your component with
|
|
* the new theme value.
|
|
*
|
|
* The `MutationObserver` is automatically disconnected when the component unmounts.
|
|
*
|
|
* @returns The current theme ("light" or "dark")
|
|
*
|
|
* @example Conditionally render based on theme
|
|
* ```tsx source="./useDocumentTheme.examples.tsx#useDocumentTheme_conditionalRender"
|
|
* function MyApp() {
|
|
* const theme = useDocumentTheme();
|
|
*
|
|
* return <div>{theme === "dark" ? <DarkIcon /> : <LightIcon />}</div>;
|
|
* }
|
|
* ```
|
|
*
|
|
* @example Use with theme-aware styling
|
|
* ```tsx source="./useDocumentTheme.examples.tsx#useDocumentTheme_themedButton"
|
|
* function ThemedButton() {
|
|
* const theme = useDocumentTheme();
|
|
*
|
|
* return (
|
|
* <button
|
|
* style={{
|
|
* background: theme === "dark" ? "#333" : "#fff",
|
|
* color: theme === "dark" ? "#fff" : "#333",
|
|
* }}
|
|
* >
|
|
* Click me
|
|
* </button>
|
|
* );
|
|
* }
|
|
* ```
|
|
*
|
|
* @see {@link getDocumentTheme `getDocumentTheme`} for the underlying function
|
|
* @see {@link applyDocumentTheme `applyDocumentTheme`} to set the theme
|
|
*/
|
|
export declare function useDocumentTheme(): McpUiTheme;
|