import React from 'react';
import type { CommonComponentProps } from '../types';
type Themes = 'researcher' | 'bandit' | string;
type ColorSchemes = 'light' | 'dark' | 'dark-close' | 'dark-coachmark' | 'dark-dscout' | 'dark-success' | 'dark-test' | string;
interface ThemeProviderProps extends CommonComponentProps {
/** Apply the color scheme's background color. */
applyBackgroundColor?: boolean;
/** Apply the color scheme's text color. */
applyColor?: boolean;
/** The root DOM element type to render. */
as?: React.ElementType;
children?: React.ReactNode;
/** Additional class name(s) to apply. */
className?: string;
/** **Experimental**: Name of the color scheme to apply. */
colorScheme?: ColorSchemes;
/** Name of the theme to apply. */
theme?: Themes;
/**
* Set the theme class on the `` instead of the DOM element rendered by
* this component. Use this on the top-level ``.
*/
global?: boolean;
}
export declare const ThemeContext: React.Context<{
theme: Themes;
colorScheme: ColorSchemes;
}>;
/**
* Use the `` to apply a theme to Particle. Particle is
* largely unstyled without a defined theme, so each app will need to render a
* `` at the top level. The top-level provider should use the
* `global` prop to set the theme class on the body element. You'll likely
* want to also use the `applyBackgroundColor` prop on the top-level provider to
* apply the color scheme's base background color to the whole page.
*
* Themes can be nested to apply a different theme or color scheme to only a
* subsection of an interface. Do not apply the `global` prop for nested themes.
*
* The `` also renders a React context provider, so descendants
* can use `ThemeContext` to customize their behavior based on the theme or
* color scheme. For example:
*
* ```jsx
* import React, { useContext } from 'react';
* import { ThemeContext } from '@dscout/particle';
*
* function Descendant() {
* const { colorScheme, theme } = useContext(ThemeContext)
*
* return (
* I'm in the {theme} theme with the {colorScheme} color scheme!
* );
* }
* ```
*/
export declare function ThemeProvider({ applyBackgroundColor, applyColor, as: ElementToRenderAs, children, className, colorScheme: specifiedColorScheme, theme: specifiedTheme, global, ...props }: ThemeProviderProps): React.JSX.Element;
export {};