@uspk-ui/color-mode/dist/index.d.ts

React component and hooks for handling light and dark mode.

import * as react from 'react';

declare type ColorMode = "light" | "dark";
declare type ColorModeWithSystem = ColorMode | "system" | undefined;
/**
 * @deprecated use `ColorModeWithSystem` instead
 */
declare type ConfigColorMode = ColorModeWithSystem;
interface ColorModeOptions {
    initialColorMode?: ColorModeWithSystem;
    useSystemColorMode?: boolean;
    disableTransitionOnChange?: boolean;
}
interface ColorModeContextType {
    forced?: boolean;
    colorMode: ColorMode;
    toggleColorMode: () => void;
    setColorMode: (value: any) => void;
}

declare type MaybeColorMode = ColorMode | undefined;
interface StorageManager {
    type: "cookie" | "localStorage";
    ssr?: boolean;
    get(init?: ColorMode): MaybeColorMode;
    set(value: ColorMode | "system"): void;
}
declare function createLocalStorageManager(key: string): StorageManager;
declare const localStorageManager: StorageManager;
declare function createCookieStorageManager(key: string, cookie?: string): StorageManager;
declare const cookieStorageManager: StorageManager;
declare const cookieStorageManagerSSR: (cookie: string) => StorageManager;

interface ColorModeProviderProps {
    value?: ColorMode;
    children?: React.ReactNode;
    options?: ColorModeOptions;
    colorModeManager?: StorageManager;
}
/**
 * Provides context for the color mode based on config in `theme`
 * Returns the color mode and function to toggle the color mode
 */
declare function ColorModeProvider(props: ColorModeProviderProps): JSX.Element;
declare namespace ColorModeProvider {
    var displayName: string;
}
/**
 * Locks the color mode to `dark`, without any way to change it.
 */
declare function DarkMode(props: React.PropsWithChildren<{}>): JSX.Element;
declare namespace DarkMode {
    var displayName: string;
}
/**
 * Locks the color mode to `light` without any way to change it.
 */
declare function LightMode(props: React.PropsWithChildren<{}>): JSX.Element;
declare namespace LightMode {
    var displayName: string;
}

declare type ColorModeScriptProps = {
    type?: "localStorage" | "cookie";
    initialColorMode?: "light" | "dark" | "system";
    storageKey?: string;
    nonce?: string;
};
declare function getScriptSrc(props?: ColorModeScriptProps): string;
declare function ColorModeScript(props?: ColorModeScriptProps): JSX.Element;

declare const ColorModeContext: react.Context<ColorModeContextType>;
/**
 * React hook that reads from `ColorModeProvider` context
 * Returns the color mode and function to toggle it
 */
declare function useColorMode(): ColorModeContextType;
/**
 * Change value based on color mode.
 *
 * @param light the light mode value
 * @param dark the dark mode value
 *
 * @example
 *
 * ```js
 * const Icon = useColorModeValue(MoonIcon, SunIcon)
 * ```
 */
declare function useColorModeValue<TLight = unknown, TDark = unknown>(light: TLight, dark: TDark): TLight | TDark;

export { ColorMode, ColorModeContext, ColorModeContextType, ColorModeProvider, ColorModeProviderProps, ColorModeScript, ColorModeScriptProps, ColorModeWithSystem, ConfigColorMode, DarkMode, LightMode, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createLocalStorageManager, getScriptSrc, localStorageManager, useColorMode, useColorModeValue };