/** * 主题工具函数 * * 提供主题相关的辅助函数 */ import { Colors } from '@/theme'; import { ThemeEnum } from '@/constants/theme'; /** * 根据主题获取颜色 * * @param theme - 主题类型 ThemeEnum * @param colorName - 颜色名称 * @returns 颜色值 */ export function getThemeColor( theme: ThemeEnum, colorName: keyof typeof Colors.light & keyof typeof Colors.dark & keyof typeof Colors.orange ): string { return Colors[theme][colorName]; } /** * 根据主题获取所有颜色 * * @param theme - 主题类型 ThemeEnum * @returns 颜色对象 */ export function getThemeColors(theme: ThemeEnum) { return Colors[theme]; } /** * 创建主题感知的样式 * * @param lightStyle - 浅色主题样式 * @param darkStyle - 深色主题样式 * @param orangeStyle - 橙色主题样式 * @param theme - 当前主题 * @returns 合并后的样式 * * @example * ```tsx * const style = createThemedStyle( * { backgroundColor: '#fff' }, * { backgroundColor: '#000' }, * theme * ); * ``` */ export function createThemedStyle( lightStyle: T, darkStyle: T, orangeStyle: T, theme: ThemeEnum ): T { switch (theme) { case ThemeEnum.LIGHT: return lightStyle; case ThemeEnum.DARK: return darkStyle; case ThemeEnum.ORANGE: return orangeStyle; default: return lightStyle; } } /** * 根据主题选择值 * * @param lightValue - 浅色主题值 * @param darkValue - 深色主题值 * @param orangeValue - 深色主题值 * @param theme - 当前主题 * @returns 选中的值 * * @example * ```tsx * const fontSize = selectByTheme(14, 16, theme); * ``` */ export function selectByTheme( lightValue: T, darkValue: T, orangeValue: T, theme: ThemeEnum ): T { switch (theme) { case ThemeEnum.LIGHT: return lightValue; case ThemeEnum.DARK: return darkValue; case ThemeEnum.ORANGE: return orangeValue; default: return lightValue; } } /** * 颜色透明度调整 * * @param color - 十六进制颜色值 * @param opacity - 透明度 0-1 * @returns 带透明度的颜色值 * * @example * ```tsx * const color = withOpacity('#000000', 0.5); // rgba(0, 0, 0, 0.5) * ``` */ export function withOpacity(color: string, opacity: number): string { // 移除 # 号 const hex = color.replace('#', ''); // 转换为 RGB const r = parseInt(hex.substring(0, 2), 16); const g = parseInt(hex.substring(2, 4), 16); const b = parseInt(hex.substring(4, 6), 16); return `rgba(${r}, ${g}, ${b}, ${opacity})`; } /** * 判断是否为深色主题 * * @param theme - 主题类型 * @returns 是否为深色主题 */ export function isDarkTheme(theme: ThemeEnum): boolean { return theme === ThemeEnum.DARK; } /** * 判断是否为浅色主题 * * @param theme - 主题类型 * @returns 是否为浅色主题 */ export function isLightTheme(theme: ThemeEnum): boolean { return theme === ThemeEnum.LIGHT; } /** * 判断是否为橙色主题 * * @param theme - 主题类型 * @returns 是否为橙色主题 */ export function isOrangeTheme(theme: ThemeEnum): boolean { return theme === ThemeEnum.ORANGE; }