Theme, fonts & appearance

1configureChat({2  theme: {3    colorMode: 'light',       // 'light' | 'dark'4    accent: '#124232',        // hex, or 'green' | 'teal' | 'blue' | 'indigo' | 'purple' | 'pink' | 'orange' | 'red'5    avatarShape: 'circle',    // 'circle' | 'rounded' | 'square'6    messageStyle: 'whatsapp', // 'whatsapp' | 'oval' | 'rounded' | 'square'7  },8});

A hex accent drives headers (light mode), buttons, FABs, links, checks, badges, outgoing bubbles and tinted icons; related shades are derived. Default accent: green.

theme values are the initial appearance. The user can change appearance in the package's settings; their saved choice (AsyncStorage) wins on the next launch.

Fine-tune any palette key per mode with theme.colors.light / theme.colors.dark:

theme, headerBg, headerText, surface, canvas, chatBg, mainBg, border, muted, text, textSecondary, hover, incomingBubble, incomingText, outgoingBubble, outgoingText, inputBg, composerBg, online, unreadBadge, elevated, searchBg, tick, tickRead, danger, warning, white, black, transparent.

1configureChat({2  theme: {3    accent: '#6366f1',4    colors: {5      light: {chatBg: '#F5F6F8', incomingBubble: '#FFFFFF'},6      dark: {chatBg: '#0B141A'},7    },8  },9});

1import {useAppTheme} from '@realtimexsco/live-chat-react-native';2 3const {colors, fonts, isDark, colorMode, setTheme, toggleTheme, setThemeAccent,4       setAvatarShape, setMessageStyle, avatarRadius, bubbleRadii} = useAppTheme();

Also exported: getColors(mode, accent), getThemeAccent, THEME_ACCENT_OPTIONS, createAccentFromHex, normalizeHexColor, isHexColor, AVATAR_SHAPE_OPTIONS, MESSAGE_STYLE_OPTIONS, Spacing, FontSize, FontWeight, Typography, getTypography.

The package only consumes font family names. Register the font files natively first (ios/MyChatApp/Info.plist → UIAppFonts, android/app/src/main/assets/fonts/, or npx react-native-asset), then:

1configureChat({2  fonts: {3    Regular: 'MyApp-Regular',4    SemiBold: 'MyApp-SemiBold',5    Bold: 'MyApp-Bold',6    // also: Black, Light, Italic, Bold_Italic, Light_Italic, SemiBold_Italic, Extra_Light, Extra_Light_Italic7  },8});

Empty values fall back to the system font.