rooks/dist/esm/hooks/usePreferredColorScheme.d.ts

Collection of awesome react hooks

/**
 * Color scheme preference
 */
type ColorScheme = "light" | "dark" | "no-preference";
/**
 * Return value for the usePreferredColorScheme hook
 */
interface UsePreferredColorSchemeReturnValue {
    /**
     * The preferred color scheme (light, dark, or no-preference)
     */
    colorScheme: ColorScheme | null;
    /**
     * Whether the preferred color scheme is dark
     */
    isDark: boolean;
    /**
     * Whether the preferred color scheme is light
     */
    isLight: boolean;
}
/**
 * usePreferredColorScheme hook
 *
 * Detect and track the user's preferred color scheme (dark mode or light mode).
 * Automatically updates when the user changes their system preference.
 *
 * @returns Object containing color scheme information
 *
 * @example
 * ```tsx
 * import { usePreferredColorScheme } from "rooks";
 *
 * function ThemeAwareComponent() {
 *   const { colorScheme, isDark, isLight } = usePreferredColorScheme();
 *
 *   return (
 *     <div style={{
 *       backgroundColor: isDark ? "#000" : "#fff",
 *       color: isDark ? "#fff" : "#000"
 *     }}>
 *       <h1>Current theme: {colorScheme}</h1>
 *       <p>Dark mode is {isDark ? "enabled" : "disabled"}</p>
 *       <p>Light mode is {isLight ? "enabled" : "disabled"}</p>
 *     </div>
 *   );
 * }
 * ```
 *
 * @see https://rooks.vercel.app/docs/hooks/usePreferredColorScheme
 */
declare function usePreferredColorScheme(): UsePreferredColorSchemeReturnValue;
export { usePreferredColorScheme };
export type { UsePreferredColorSchemeReturnValue, ColorScheme };