import { type ReactElement, type ReactNode } from "react";
import { type ConfigurableThemeColors, type ThemeContext } from "./types.js";
/**
 * This hook can be used to access the current theme set by the
 * {@link ThemeProvider}.
 *
 * @example Simple Example
 * ```tsx
 * import { useTheme } from "@react-md/core/theme/ThemeProvider";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   const theme = useTheme();
 *
 *   return <pre><code>{JSON.stringify(theme, null, 2)}</code></pre>;
 * }
 * ```
 *
 * @since 6.0.0
 * @throws "The `ThemeProvider` has not been initialized."
 */
export declare function useTheme(): Readonly<ThemeContext>;
/**
 * @internal
 * @since 6.0.0
 */
export declare function useTheme(allowUndefined: true): Readonly<ThemeContext> | undefined;
/** @since 6.0.0 */
export interface ThemeProviderProps {
    /**
     * When this is `undefined`, the theme will be derived by computing the
     * `document.documentElement`'s styles for all the `react-md` theme custom
     * properties. The theme will also automatically update whenever the
     * `currentColor` or `colorScheme` change.
     *
     * It is recommended to manually provide your theme if you know it beforehand.
     * Deriving the theme is really only useful if you allow your user to
     * customize all these theme values themselves and persist through local
     * storage/cookies.
     *
     * @see {@link DEFAULT_DARK_THEME}
     * @see {@link DEFAULT_LIGHT_THEME}
     * @defaultValue `currentColor === "dark" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`
     */
    theme?: Readonly<ConfigurableThemeColors>;
    children: ReactNode;
}
/**
 * **Client Component**
 *
 * The `ThemeProvider` should be added to the root of your app but as a child of
 * the `CoreProviders`.
 *
 * @example
 * ```tsx
 * import { CoreProviders } from "@react-md/core/CoreProviders";
 * import {
 *   black,
 *   blue500,
 *   greenAccent700,
 *   orangeAccent200,
 *   orangeAccent400,
 *   red500,
 * } from "@react-md/core/theme/colors";
 * import { ThemeProvider } from "@react-md/core/theme/ThemeProvider";
 * import { type ConfigurableThemeColors } from "@react-md/core/theme/types";
 * import { type ReactElement } from "react";
 * import { createRoot } from "react-dom/client";
 *
 * import App from "./App";
 *
 * const theme: Readonly<ConfigurableThemeColors> = {
 *   primaryColor: blue500,
 *   onPrimaryColor: black,
 *   secondaryColor: orangeAccent400,
 *   onSecondaryColor: black,
 *   warningColor: orangeAccent200,
 *   onWarningColor: black,
 *   errorColor: red500,
 *   onErrorColor: black,
 *   successColor: greenAccent700,
 *   onSuccessColor: black,
 *   backgroundColor: "#121212",
 *   textPrimaryColor: "#d9d9d9",
 *   textSecondaryColor: "#b3b3b3",
 *   textHintColor: "gray", // #808080
 *   textDisabledColor: "gray", // #808080
 * };
 *
 * const container = document.getElementById("app");
 * const root = createRoot(container);
 * root.render(
 *   <CoreProviders>
 *     <ThemeProvider theme={theme}>
 *       <App />
 *     </ThemeProvider>
 *   </CoreProviders>
 * );
 * ```
 *
 * @example Automatically Deriving the Theme
 * ```tsx
 * import { CoreProviders } from "@react-md/core/CoreProviders";
 * import { LocalStorageColorSchemeProvider } from "@react-md/core/theme/LocalStorageColorSchemeProvider";
 * import { ThemeProvider } from "@react-md/core/theme/ThemeProvider";
 * import { type ReactElement } from "react";
 * import { createRoot } from "react-dom/client";
 *
 * import App from "./App";
 *
 * const container = document.getElementById("app");
 * const root = createRoot(container);
 * root.render(
 *   <CoreProviders>
 *     <LocalStorageColorSchemeProvider>
 *       <ThemeProvider>
 *         <App />
 *       </ThemeProvider>
 *     </LocalStorageColorSchemeProvider>
 *   </CoreProviders>
 * );
 * ```
 *
 * @see {@link https://react-md.dev/components/theme-provider | ThemeProvider Demos}
 * @since 6.0.0
 */
export declare function ThemeProvider(props: ThemeProviderProps): ReactElement;
