import { useColorScheme } from "react-native"; import { DarkTheme, DefaultTheme, type Theme as NavigationTheme, } from "@react-navigation/native"; export type AppTheme = { dark: boolean; colors: { background: string; surface: string; surfaceAlt: string; text: string; textMuted: string; border: string; borderMuted: string; primary: string; primaryText: string; secondary: string; secondaryText: string; accent: string; accentText: string; accentSurface: string; danger: string; warningSurface: string; warningBorder: string; warningText: string; warningTextStrong: string; brandSurface: string; brandSurfaceAlt: string; brandText: string; brandTextMuted: string; brandAccent: string; brandAccentText: string; avatarSurface: string; avatarText: string; chipBackground: string; chipBorder: string; chipText: string; chipActiveBackground: string; chipActiveText: string; listAvatarBackground: string; listAvatarText: string; bubbleMe: string; inputBackground: string; inputText: string; placeholder: string; tabActive: string; tabInactive: string; headerBackground: string; headerText: string; action: string; actionText: string; radioBorder: string; }; }; const lightTheme: AppTheme = { dark: false, colors: { background: "#f7f7f9", surface: "#ffffff", surfaceAlt: "#f6f8fa", text: "#0b1a2b", textMuted: "#6b7280", border: "#d8dee5", borderMuted: "#e2e8f0", primary: "#1b8b75", primaryText: "#ffffff", secondary: "#e7ecef", secondaryText: "#0c1824", accent: "#14b8a6", accentText: "#042f2e", accentSurface: "#ecfdf9", danger: "#b91c1c", warningSurface: "#fff6e5", warningBorder: "#fde7c1", warningText: "#b45309", warningTextStrong: "#7c2d12", brandSurface: "#0b1a2b", brandSurfaceAlt: "#1f334d", brandText: "#f8fafc", brandTextMuted: "#9fb3c8", brandAccent: "#14b8a6", brandAccentText: "#042f2e", avatarSurface: "#0f172a", avatarText: "#e2e8f0", chipBackground: "#ffffff", chipBorder: "#e2e8f0", chipText: "#0f172a", chipActiveBackground: "#0f172a", chipActiveText: "#f8fafc", listAvatarBackground: "#e6f6f2", listAvatarText: "#1b8b75", bubbleMe: "#dff7ef", inputBackground: "#ffffff", inputText: "#0b1a2b", placeholder: "#9aa6b2", tabActive: "#0f172a", tabInactive: "#94a3b8", headerBackground: "#ffffff", headerText: "#0b1a2b", action: "#0f172a", actionText: "#f8fafc", radioBorder: "#cbd5f5", }, }; const darkTheme: AppTheme = { dark: true, colors: { background: "#0b0f14", surface: "#111922", surfaceAlt: "#0f1620", text: "#f8fafc", textMuted: "#a7b4c5", border: "#1f2a37", borderMuted: "#243244", primary: "#1fbf98", primaryText: "#ffffff", secondary: "#1f2a37", secondaryText: "#e2e8f0", accent: "#2dd4bf", accentText: "#04221b", accentSurface: "#0f2a24", danger: "#f87171", warningSurface: "#2a1f0b", warningBorder: "#5f3b11", warningText: "#f59e0b", warningTextStrong: "#fbbf24", brandSurface: "#101a27", brandSurfaceAlt: "#1b2b3f", brandText: "#f8fafc", brandTextMuted: "#9fb3c8", brandAccent: "#2dd4bf", brandAccentText: "#04221b", avatarSurface: "#1e293b", avatarText: "#e2e8f0", chipBackground: "#111922", chipBorder: "#273244", chipText: "#e2e8f0", chipActiveBackground: "#2dd4bf", chipActiveText: "#04221b", listAvatarBackground: "#0f2a24", listAvatarText: "#5eead4", bubbleMe: "#103128", inputBackground: "#0f1620", inputText: "#f8fafc", placeholder: "#7f90a6", tabActive: "#e2e8f0", tabInactive: "#64748b", headerBackground: "#111922", headerText: "#f8fafc", action: "#e2e8f0", actionText: "#0b1a2b", radioBorder: "#334155", }, }; export function useTheme(): AppTheme { const scheme = useColorScheme(); return scheme === "dark" ? darkTheme : lightTheme; } export function getNavigationTheme(theme: AppTheme): NavigationTheme { const baseTheme = theme.dark ? DarkTheme : DefaultTheme; return { ...baseTheme, dark: theme.dark, colors: { ...baseTheme.colors, primary: theme.colors.primary, background: theme.colors.background, card: theme.colors.headerBackground, text: theme.colors.headerText, border: theme.colors.border, notification: theme.colors.accent, }, }; }