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: "#f5efe6", surface: "#fffdf8", surfaceAlt: "#efe4d5", text: "#162132", textMuted: "#6d6559", border: "#d7c8b5", borderMuted: "#e8decf", primary: "#162132", primaryText: "#fffaf2", secondary: "#e7dac9", secondaryText: "#162132", accent: "#b49053", accentText: "#241a08", accentSurface: "#f8eedf", danger: "#a13b2d", warningSurface: "#f5e8c8", warningBorder: "#dec89a", warningText: "#8b621d", warningTextStrong: "#67470b", brandSurface: "#162132", brandSurfaceAlt: "#23314a", brandText: "#fff8ee", brandTextMuted: "#cfbea0", brandAccent: "#b49053", brandAccentText: "#241a08", avatarSurface: "#23314a", avatarText: "#fff8ee", chipBackground: "#fffaf2", chipBorder: "#dfd0bd", chipText: "#162132", chipActiveBackground: "#162132", chipActiveText: "#fff8ee", listAvatarBackground: "#ede1cf", listAvatarText: "#7a6135", bubbleMe: "#efe3d2", inputBackground: "#fffaf2", inputText: "#162132", placeholder: "#9e907b", tabActive: "#162132", tabInactive: "#978b78", headerBackground: "#fff8ee", headerText: "#162132", action: "#162132", actionText: "#fff8ee", radioBorder: "#d4c1a0", }, }; const darkTheme: AppTheme = { dark: true, colors: { background: "#0e1420", surface: "#141d2c", surfaceAlt: "#1a2537", text: "#f8f2e7", textMuted: "#b1a48e", border: "#243248", borderMuted: "#2d3c55", primary: "#f4ead9", primaryText: "#162132", secondary: "#243248", secondaryText: "#f8f2e7", accent: "#c5a56a", accentText: "#251a08", accentSurface: "#2c2417", danger: "#ef8b7f", warningSurface: "#342712", warningBorder: "#715426", warningText: "#e5b96a", warningTextStrong: "#f3d598", brandSurface: "#121a29", brandSurfaceAlt: "#1a2740", brandText: "#fff8ee", brandTextMuted: "#cebda0", brandAccent: "#c5a56a", brandAccentText: "#251a08", avatarSurface: "#26344d", avatarText: "#fff8ee", chipBackground: "#141d2c", chipBorder: "#32425e", chipText: "#f8f2e7", chipActiveBackground: "#c5a56a", chipActiveText: "#251a08", listAvatarBackground: "#2d2418", listAvatarText: "#e4c688", bubbleMe: "#26311b", inputBackground: "#101828", inputText: "#f8f2e7", placeholder: "#7d8aa0", tabActive: "#f8f2e7", tabInactive: "#7f8ca2", headerBackground: "#121a29", headerText: "#f8f2e7", action: "#f4ead9", actionText: "#162132", radioBorder: "#43526e", }, }; 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, }, }; }