/** * 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 ( *
Dark mode is {isDark ? "enabled" : "disabled"}
*Light mode is {isLight ? "enabled" : "disabled"}
*