react-theme-system/dist/hooks/useThemeToggle.d.ts

A comprehensive React theme management system that enforces consistency, supports dark/light mode, and eliminates hardcoded styles

import { ValidTheme } from '../types';
/**
 * Headless hook for theme toggle functionality
 * Decouples theme logic from presentation, enabling custom UIs without fork-modifying
 *
 * @example
 * ```tsx
 * const { isDark, toggle, setTheme } = useThemeToggle();
 *
 * return (
 *   <button onClick={toggle}>
 *     {isDark ? '🌙' : '☀️'}
 *   </button>
 * );
 * ```
 */
export declare const useThemeToggle: () => {
    isDark: boolean;
    isLight: boolean;
    currentTheme: "light" | "dark" | undefined;
    isHydrated: boolean;
    toggle: () => void;
    setLight: () => void;
    setDark: () => void;
    setTheme: (_theme: ValidTheme) => void;
    nextTheme: "light" | "dark";
    icon: string;
    label: string;
    ariaLabel: string;
};
/**
 * Enhanced theme toggle hook with system theme detection
 *
 * @example
 * ```tsx
 * const { isDark, toggle, systemTheme, isSystemTheme } = useThemeToggleWithSystem();
 *
 * return (
 *   <div>
 *     <button onClick={toggle}>
 *       {isDark ? '🌙' : '☀️'}
 *     </button>
 *     {systemTheme && <span>System: {systemTheme}</span>}
 *   </div>
 * );
 * ```
 */
export declare const useThemeToggleWithSystem: () => {
    isDark: boolean;
    isLight: boolean;
    currentTheme: "light" | "dark" | undefined;
    isHydrated: boolean;
    systemTheme: "light" | "dark" | null;
    isSystemTheme: boolean;
    toggle: () => void;
    setLight: () => void;
    setDark: () => void;
    setSystem: () => void;
    setTheme: (_theme: ValidTheme) => void;
    cycleTheme: () => void;
    nextTheme: "light" | "dark";
    icon: string;
    label: string;
    ariaLabel: string;
    systemIcon: string;
    systemLabel: string;
    hasSystemTheme: boolean;
};