/** * Theme color hook with dark mode support * Uses ThemeContext for user preference, falls back to system preference */ import { Colors } from '@/constants/theme'; import { useThemeOptional } from '@/contexts/ThemeContext'; import { useColorScheme } from '@/hooks/use-color-scheme'; export type ThemeColorName = keyof typeof Colors.light & keyof typeof Colors.dark; export function useThemeColor( props: { light?: string; dark?: string }, colorName: ThemeColorName ) { const themeContext = useThemeOptional(); const systemTheme = useColorScheme(); // Use ThemeContext if available, otherwise fall back to system const theme = themeContext?.resolvedTheme ?? systemTheme ?? 'light'; const colorFromProps = props[theme]; if (colorFromProps) { return colorFromProps; } else { return Colors[theme][colorName]; } } /** * Hook to get all theme colors at once * Useful for components that need multiple colors */ export function useThemeColors() { const themeContext = useThemeOptional(); const systemTheme = useColorScheme(); const theme = themeContext?.resolvedTheme ?? systemTheme ?? 'light'; return Colors[theme]; } /** * Hook to get resolved theme */ export function useResolvedTheme(): 'light' | 'dark' { const themeContext = useThemeOptional(); const systemTheme = useColorScheme(); return themeContext?.resolvedTheme ?? systemTheme ?? 'light'; } /** * Hook to check if dark mode is active */ export function useIsDarkMode(): boolean { const themeContext = useThemeOptional(); const systemTheme = useColorScheme(); const resolvedTheme = themeContext?.resolvedTheme ?? systemTheme ?? 'light'; return resolvedTheme === 'dark'; }