@cerberus-design/react/dist/context/theme.d.ts

The Cerberus Design React component library.

import { PropsWithChildren } from 'react';
import { UseThemeOptions } from '../hooks/useTheme';
/**
 * This module provides a context and hook for the theme.
 * @module Theme
 */
export type DefaultThemes = 'cerberus' | 'acheron';
export type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K;
export type ColorModes = 'light' | 'dark' | 'system';
export interface ThemeContextValue<T extends string = DefaultThemes> {
    /**
     * The current theme.
     */
    theme: CustomThemes<T>;
    /**
     * The current color mode.
     */
    mode: ColorModes;
    /**
     * Called when the theme is updated.
     */
    updateTheme: (theme: T) => void;
    /**
     * Called when the color mode is updated.
     */
    updateMode: (mode: ColorModes) => void;
}
export interface ThemeProviderProps extends UseThemeOptions {
    /**
     * The default theme.
     */
    defaultTheme?: DefaultThemes;
    /**
     * The default color mode.
     */
    defaultColorMode?: ColorModes;
}
/**
 * A context provider that allows the user to set the theme and mode of the
 * application.
 * @see https://cerberus.digitalu.design/react/use-theme-context
 * @example
 * ```tsx
 * <ThemeProvider>
 *  <App />
 * </ThemeProvider>
 * ```
 */
export declare function ThemeProvider(props: PropsWithChildren<ThemeProviderProps>): import("react/jsx-runtime").JSX.Element;
/**
 * Used to access the theme context.
 */
export declare function useThemeContext(): ThemeContextValue<DefaultThemes>;