rn-app/hooks/useTheme.ts

/**
 * 主题 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();
 * <View style={{ backgroundColor: colors.background }}>
 *   <Text style={{ color: colors.text }}>Hello</Text>
 * </View>
 * ```
 */
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]);
}