/** * 主题 Hooks * * 提供统一的主题访问接口 */ import { useMemo } from 'react'; import { useColorScheme as useSystemColorScheme } from 'react-native'; import { useTheme as useThemeStore } from '@/stores'; import { Colors } from '@/theme'; import { ThemeEnum } from '@/constants/theme'; /** * 获取当前颜色方案(light | dark | orange) * * 从 settingsStore 读取用户设置的主题 * 支持 'light' | 'dark' | 'orange' | 'auto' 四种模式 */ export function useColorScheme(): ThemeEnum { const userTheme = useThemeStore(); const systemTheme = useSystemColorScheme(); // 如果用户选择了 'auto',则使用系统主题 if (userTheme === 'auto') { return systemTheme === 'dark' ? ThemeEnum.DARK : ThemeEnum.LIGHT; } // 否则使用用户选择的主题 return userTheme as ThemeEnum; } /** * 获取主题颜色 * * @param props - 可选的自定义颜色 { light?: string; dark?: string; orange?: string } * @param colorName - Colors 中定义的颜色名称 * @returns 当前主题对应的颜色值 * * @example * ```tsx * const textColor = useThemeColor({}, 'text'); * const customColor = useThemeColor({ light: '#000', dark: '#fff', orange: '#f90' }, 'text'); * ``` */ export function useThemeColor( props: { light?: string; dark?: string; orange?: string }, colorName: keyof typeof Colors.light & keyof typeof Colors.dark & keyof typeof Colors.orange ): string { const theme = useColorScheme(); const colorFromProps = props[theme]; if (colorFromProps) { return colorFromProps; } else { return Colors[theme][colorName]; } } /** * 获取完整的主题颜色对象 * * @returns 当前主题的所有颜色配置 * * @example * ```tsx * const colors = useThemeColors(); * * Hello * * ``` */ export function useThemeColors() { const theme = useColorScheme(); return useMemo(() => { return Colors[theme]; }, [theme]); } /** * 获取主题相关的所有信息 * * @returns 主题信息对象 * * @example * ```tsx * const { theme, colors, isDark, isLight, isOrange } = useThemeInfo(); * ``` */ export function useThemeInfo() { const theme = useColorScheme(); const colors = useThemeColors(); return useMemo(() => ({ theme, colors, isDark: theme === ThemeEnum.DARK, isLight: theme === ThemeEnum.LIGHT, isOrange: theme === ThemeEnum.ORANGE, }), [theme, colors]); }