import { usePublicSettings } from './usePublicSettings'; import { useMemo } from 'react'; import { PublicSettings } from '../services/settings'; interface ThemeColors { primary: string; secondary: string; text: string; background: string; accent: string; [key: string]: string; // For any additional color keys } interface ClubTheme { primaryColor: string; secondaryColor: string; textColor: string; backgroundColor: string; accentColor: string; isDarkMode: boolean; logoUrl?: string; faviconUrl?: string; colors: ThemeColors; } const DEFAULT_THEME: ClubTheme = { // Modern cool palette defaults (no red/yellow) primaryColor: '#1e3a8a', // blue-800 secondaryColor: '#0ea5a4', // teal-500 textColor: '#0f172a', // slate-900 backgroundColor: '#ffffff', accentColor: '#2563eb', // blue-600 isDarkMode: false, colors: { primary: '#1e3a8a', secondary: '#0ea5a4', text: '#0f172a', background: '#ffffff', accent: '#2563eb' } }; export const useClubTheme = (): ClubTheme => { const { data: settings } = usePublicSettings(); return useMemo(() => { if (!settings) return DEFAULT_THEME; const primaryColor = settings.primary_color || DEFAULT_THEME.primaryColor; const secondaryColor = settings.secondary_color || DEFAULT_THEME.secondaryColor; const textColor = settings.text_color || DEFAULT_THEME.textColor; const backgroundColor = settings.background_color || DEFAULT_THEME.backgroundColor; const accentColor = settings.accent_color || DEFAULT_THEME.accentColor; return { primaryColor, secondaryColor, textColor, backgroundColor, accentColor, isDarkMode: false, // No dark_mode in PublicSettings, default to false logoUrl: settings.club_logo_url, faviconUrl: undefined, // No favicon_url in PublicSettings colors: { primary: primaryColor, secondary: secondaryColor, text: textColor, background: backgroundColor, accent: accentColor, // Add any additional color mappings here } }; }, [settings]); }; export default useClubTheme;