@ethora/chat-component-rn 26.8.2 → 26.8.4

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -1,9 +1,18 @@
-import React, {useMemo} from 'react';
-import {Provider, useDispatch} from 'react-redux';
+import React, {useEffect, useMemo, useRef} from 'react';
+import {useColorScheme} from 'react-native';
+import {Provider, useDispatch, useSelector} from 'react-redux';
 import {KeyboardProvider} from 'react-native-keyboard-controller';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {ThemeProvider} from 'styled-components/native';
+import {applyThemePreference, resolveTheme} from '../../theme/theme';
 import {store} from '../../roomStore';
-import {setConfig} from '../../roomStore/chatSettingsSlice';
+import type {RootState} from '../../roomStore';
+import {
+  setConfig,
+  setPushEnabled,
+  setThemePreference,
+} from '../../roomStore/chatSettingsSlice';
+import {loadPreferences} from '../../helpers/preferencesStorage';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
 import {XmppProvider} from '../../context/xmppProvider';
 import {MessageNotificationProvider} from '../../context/MessageNotificationContext';
@@ -12,12 +21,19 @@ import LoginWrapper from './LoginWrapper';
 import '../../helpers/storeConsole';
 import {installPromiseRejectionTracker} from '../../utils/installPromiseRejectionTracker';
 import {useChatFonts} from '../../hooks/useChatFonts';
+import {installPushTokenHook} from '../../services/pushRegistration';
 
 // Mount-time, dev-only — wire a global unhandled-promise-rejection
 // tracker so any future leak surfaces with a real stack trace in Metro
 // logs (bug #4 follow-up). No-op in production.
 installPromiseRejectionTracker();
 
+// Arms the push-token watcher once for the package: it runs
+// `config.pushNotifications.getPushTokens` for every login and flushes
+// tokens handed over through `registerPushToken` before sign-in. Cheap
+// (one store subscription), no-op for hosts that never use push.
+installPushTokenHook();
+
 interface ChatWrapperProps {
   token?: string;
   roomJID?: string;
@@ -44,6 +60,42 @@ const ConfigEnabler: React.FC<{config?: IConfig}> = ({config}) => {
   return null;
 };
 
+const ChatThemeProvider: React.FC<{config?: IConfig; children: React.ReactNode}> = ({
+  config,
+  children,
+}) => {
+  const dispatch = useDispatch();
+  const storeConfig = useSelector((s: RootState) => s.chatSettingStore.config);
+  const preference = useSelector(
+    (s: RootState) => s.chatSettingStore.themePreference,
+  );
+  const systemDark = useColorScheme() === 'dark';
+  const effective = applyThemePreference(storeConfig ?? config, preference);
+  const theme = useMemo(
+    () => resolveTheme(effective, systemDark),
+    [effective, systemDark],
+  );
+
+  const hydrated = useRef(false);
+  useEffect(() => {
+    if (hydrated.current) {return;}
+    hydrated.current = true;
+    loadPreferences().then((prefs) => {
+      if (prefs.theme) {dispatch(setThemePreference(prefs.theme));}
+      if (typeof prefs.pushEnabled === 'boolean') {
+        dispatch(setPushEnabled(prefs.pushEnabled));
+      }
+    });
+  }, [dispatch]);
+
+  const onThemeChange = config?.eventHandlers?.onThemeChange;
+  useEffect(() => {
+    if (preference && onThemeChange) {onThemeChange(preference, theme.dark);}
+  }, [preference, theme.dark, onThemeChange]);
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
 export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
   ({...props}) => {
     const memoizedConfig = useMemo(() => {
@@ -61,14 +113,19 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
     // KeyboardAvoidingView under the same flag).
     const ownKeyboardHandling = !memoizedConfig?.disableKeyboardAvoidingView;
 
+    // Light/dark palette (config.dark + config.darkColors + the Settings
+    // choice). Styled components read it via `({ theme }) => theme.surface`;
+    // plain RN styles via the `useTheme()` hook.
     const tree = (
-      <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
-        <ToastProvider>
-          <MessageNotificationProvider config={memoizedConfig}>
-            <LoginWrapper config={memoizedConfig} {...props} />
-          </MessageNotificationProvider>
-        </ToastProvider>
-      </XmppProvider>
+      <ChatThemeProvider config={memoizedConfig}>
+        <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
+          <ToastProvider>
+            <MessageNotificationProvider config={memoizedConfig}>
+              <LoginWrapper config={memoizedConfig} {...props} />
+            </MessageNotificationProvider>
+          </ToastProvider>
+        </XmppProvider>
+      </ChatThemeProvider>
     );
 
     return (

package/src/components/MainComponents/RoomList.tsx

@@ -26,6 +26,7 @@ import { HeaderRoomList } from '../Header/HeaderRoomList';
 import { HeaderRoomListMenu } from '../Menu/HeaderRoomListMenu';
 import { getIconColor } from '../../helpers/getIconColor';
 import { useT } from '../../i18n/useT';
+import { useTheme } from '../../hooks/useTheme';
 
 const LONG_PRESS_THRESHOLD = 200;
 
@@ -35,9 +36,8 @@ interface RoomListProps {
   onRoomClick?: (chat: IRoom) => void;
 }
 
-/** Page ground behind the room list, the search field and the header's
- * rounded bottom corners. */
-const LIST_BACKGROUND = '#E8EDF2';
+// The page ground behind the room list, the search field and the header's
+// rounded bottom corners is `theme.listBackground` (applied inline below).
 
 /** A release that leaves the search strip in between is settled by
  * scrolling to whichever end is nearer; this delay lets the platform tell
@@ -78,6 +78,7 @@ const RoomList: React.FC<RoomListProps> = ({
 }) => {
   const { config } = useChatSettingState();
   const t = useT();
+  const theme = useTheme();
 
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -358,7 +359,11 @@ const RoomList: React.FC<RoomListProps> = ({
       )}
       <View
         ref={containerRef}
-        style={[styles.container, config?.roomListStyles]}
+        style={[
+          styles.container,
+          { backgroundColor: theme.listBackground },
+          config?.roomListStyles,
+        ]}
       >
         {(open || !burgerMenu) && (
           <>
@@ -401,7 +406,10 @@ const RoomList: React.FC<RoomListProps> = ({
                       <ChatRoomItem chat={item} config={config} />
                     </Pressable>
                   )}
-                  style={styles.chatList}
+                  style={[
+                    styles.chatList,
+                    { backgroundColor: theme.listBackground },
+                  ]}
                 />
               </View>
 
@@ -429,7 +437,6 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     flex: 1,
-    backgroundColor: LIST_BACKGROUND,
   },
   scrollContainer: {
     flexGrow: 1,
@@ -460,7 +467,6 @@ const styles = StyleSheet.create({
   chatList: {
     flex: 1,
     paddingHorizontal: 16,
-    backgroundColor: LIST_BACKGROUND,
   },
 });
 

package/src/components/MainComponents/Select.tsx

@@ -8,6 +8,7 @@ import {
   Keyboard,
 } from 'react-native';
 import { Iso639_1Codes } from '../../types/types';
+import { useTheme } from '../../hooks/useTheme';
 
 const SelectWrapper = styled.View`
   position: relative;
@@ -18,20 +19,21 @@ const SelectBox = styled.TouchableOpacity<{
   isOpen: boolean;
   borderColor?: string;
 }>`
-  border: ${({ borderColor }) =>
-    borderColor ? `1px solid ${borderColor}` : '1px solid #ccc'};
+  border: ${({ borderColor, theme }) =>
+    `1px solid ${borderColor || theme.border}`};
   padding: 10px;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.surface};
   border-radius: 5px;
   box-shadow: ${({ isOpen }) =>
     isOpen ? '0px 4px 8px rgba(0, 0, 0, 0.1)' : 'none'};
 `;
 
+// Light keeps its original #aaa; dark uses the palette's muted text.
 const Placeholder = styled.Text`
-  color: #aaa;
+  color: ${({ theme }) => (theme.dark ? theme.textMuted : '#aaa')};
 `;
 
 const Icon = styled(Animated.Text)`
@@ -43,9 +45,9 @@ const Dropdown = styled.View`
   top: 100%;
   left: 0;
   right: 0;
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.surface};
   max-height: 200px;
-  border: 1px solid #ccc;
+  border: 1px solid ${({ theme }) => theme.border};
   border-radius: 5px;
   z-index: 100;
 `;
@@ -54,7 +56,8 @@ const SearchBox = styled.TextInput`
   width: 100%;
   padding: 10px;
   border-bottom-width: 1px;
-  border-color: #ccc;
+  border-color: ${({ theme }) => theme.border};
+  color: ${({ theme }) => theme.text};
   box-sizing: border-box;
 `;
 
@@ -63,7 +66,7 @@ const DropdownItem = styled.TouchableOpacity`
 `;
 
 const DropdownItemText = styled.Text`
-  color: #000;
+  color: ${({ theme }) => theme.text};
 `;
 
 interface SelectProps {
@@ -81,6 +84,7 @@ const Select: React.FC<SelectProps> = ({
   accentColor,
   selectedValue = null,
 }) => {
+  const theme = useTheme();
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState<{ name: string; id: string } | null>(
     selectedValue
@@ -139,6 +143,7 @@ const Select: React.FC<SelectProps> = ({
         <Dropdown>
           <SearchBox
             placeholder="Search..."
+            placeholderTextColor={theme.textMuted}
             value={searchTerm}
             onChangeText={setSearchTerm}
           />

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -24,6 +24,7 @@ import { setActiveModal } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useLogout } from '../../hooks/useLogout';
+import { useTheme } from '../../hooks/useTheme';
 import {
   shouldClaimVerticalDrag,
   shouldDismissOnDrag,
@@ -112,7 +113,10 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   const { config } = useChatSettingState();
   const performLogout = useLogout();
   const logoutConfig = config?.logout?.enabled ? config.logout : undefined;
-  const primaryColor = config?.colors?.primary ?? '#0052CD';
+  const theme = useTheme();
+  const primaryColor = theme.primary;
+  const iconColor = theme.icon;
+  const labelColor = theme.text;
 
   const insets = useSafeAreaInsets();
   // Measured, so the sheet is exactly as tall as its rows and starts
@@ -243,22 +247,22 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
     }[] = [
       {
         label: 'New Chat',
-        icon: <AddNewIcon color={primaryColor} />,
+        icon: <AddNewIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
         },
-        styles: { color: '#141414' },
+        styles: { color: labelColor },
       },
       {
         label: 'Profile',
-        icon: <ProfileIcon color={primaryColor} />,
+        icon: <ProfileIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.PROFILE));
         },
       },
       {
         label: 'Settings',
-        icon: <SettingIcon color={primaryColor} />,
+        icon: <SettingIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
         },
@@ -267,7 +271,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
     if (logoutConfig) {
       options.push({
         label: logoutConfig.label ?? DEFAULT_LOGOUT_LABEL,
-        icon: <LogoutIcon color={primaryColor} />,
+        icon: <LogoutIcon color={iconColor} />,
         styles: { color: primaryColor },
         onClick: () => {
           runLogoutFlow(logoutConfig, performLogout).catch(() => {});
@@ -275,7 +279,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       });
     }
     return options;
-  }, [dispatch, logoutConfig, performLogout, primaryColor]);
+  }, [dispatch, logoutConfig, performLogout, primaryColor, iconColor, labelColor]);
 
   return (
     // Presented through a real <Modal>: as an in-tree overlay the sheet was
@@ -308,6 +312,8 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
         style={[
           styles.sheet,
           {
+            backgroundColor: theme.surface,
+            shadowColor: theme.shadow,
             paddingBottom: insets.bottom + 20,
             // Two entries rather than Animated.add: the parent's value is
             // driven natively, and stacking the transforms keeps each node
@@ -324,7 +330,12 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
           style={styles.grabArea}
           {...handlePan.panHandlers}
         >
-          <View style={styles.grabber} />
+          <View
+            style={[
+              styles.grabber,
+              theme.dark ? { backgroundColor: theme.textMuted } : null,
+            ]}
+          />
         </View>
         <View style={styles.card}>
           {menuOptions.map((option, index) => (
@@ -336,12 +347,19 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
                 onPress={() => handleOptionPress(option.onClick)}
               >
                 <View style={styles.iconSlot}>{option.icon}</View>
-                <Text style={[styles.label, option?.styles]}>
+                <Text
+                  style={[styles.label, { color: theme.text }, option?.styles]}
+                >
                   {option.label}
                 </Text>
               </TouchableOpacity>
               {index < menuOptions.length - 1 && (
-                <View style={styles.divider} />
+                <View
+                  style={[
+                    styles.divider,
+                    theme.dark ? { backgroundColor: theme.divider } : null,
+                  ]}
+                />
               )}
             </View>
           ))}
@@ -369,12 +387,12 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: '500',
-    color: '#141414',
     marginLeft: 12,
   },
   divider: {
     height: StyleSheet.hairlineWidth,
     marginLeft: 54,
+    // Light hairline; swapped for theme.divider in dark mode.
     backgroundColor: '#E4E4E9',
   },
   sheet: {
@@ -385,9 +403,7 @@ const styles = StyleSheet.create({
     right: 3,
     bottom: 3,
     paddingTop: 8,
-    backgroundColor: '#FFFFFF',
     borderRadius: 20,
-    shadowColor: '#000',
     shadowOpacity: 0.12,
     shadowOffset: { width: 0, height: -3 },
     shadowRadius: 12,
@@ -403,6 +419,7 @@ const styles = StyleSheet.create({
     width: 40,
     height: 4,
     borderRadius: 2,
+    // Light pill; swapped for theme.textMuted in dark mode.
     backgroundColor: '#C9CBD1',
   },
   card: {

package/src/components/MessageBubble/BottomReplyContainer.tsx

@@ -3,6 +3,7 @@ import { IReply, IUser } from '../../types/types';
 import { Avatar } from './Avatar';
 import { styled } from 'styled-components/native';
 import { Platform, Text, View } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface BottomReplyContainerProps {
   isUser: boolean;
@@ -11,7 +12,7 @@ interface BottomReplyContainerProps {
 }
 
 const ReplyContainer = styled.TouchableOpacity<{ isUser: boolean }>`
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
   left: ${(props) => (!props.isUser ? '10px' : 'auto')};
   right: ${(props) => (props.isUser ? '10px' : 'auto')};
   padding: 4px 8px 4px 16px;
@@ -21,17 +22,20 @@ const ReplyContainer = styled.TouchableOpacity<{ isUser: boolean }>`
   gap: 6px;
   margin: 8px 8px 0;
 
-  ${Platform.select({
-    ios: `
-      shadow-color: rgba(185, 198, 199, 1);
+  ${({ theme }) =>
+    Platform.select({
+      // The light shadow is a soft bluish-grey tuned for a white card; on
+      // the dark palette that would read as a glow, so use the theme shadow.
+      ios: `
+      shadow-color: ${theme.dark ? theme.shadow : 'rgba(185, 198, 199, 1)'};
       shadow-offset: 0px 0px;
       shadow-opacity: 1;
       shadow-radius: 8px;
     `,
-    android: `
+      android: `
       elevation: 8;
     `,
-  })}
+    })}
 `;
 
 const AvatarCircle = styled.View`
@@ -46,20 +50,20 @@ const CircleCurrent = styled.View`
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid #f0f0f0;
+  border: 1px solid ${({ theme }) => theme.border};
   border-radius: 50%;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
 `;
 
 const CircleCurrentText = styled.Text`
-  color: #8c8c8c;
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 10px;
   font-weight: 100;
 `;
 
 const CounterRepliesText = styled.Text`
   font-size: 12px;
-  color: #0052cd;
+  color: ${({ theme }) => theme.primary};
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -70,6 +74,7 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
   reply,
   onClick,
 }) => {
+  const theme = useTheme();
   const uniqueUsers: IUser[] = useMemo(() => {
     return Object.values(
       reply.reduce<Record<string, IUser>>((acc, item) => {
@@ -94,7 +99,7 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
                 height: '100%',
                 width: '100%',
                 borderWidth: 1,
-                borderColor: '#F0F0F0',
+                borderColor: theme.border,
                 borderStyle: 'solid',
                 fontSize: 10,
               }}

package/src/components/MessageBubble/Message.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import {
   View,
   Pressable,
@@ -39,6 +39,7 @@ import { useXmppClient } from '../../context/xmppProvider';
 import { useSendMessage } from '../../hooks/useSendMessage';
 import { MessageReaction } from './MessageReaction';
 import { MessageFooter } from '../styled/StyledComponents';
+import { useTheme } from '../../hooks/useTheme';
 
 const CustomMessageContainer = styled.View<{ isUser: boolean; reply?: number }>`
   flex-direction: row;
@@ -73,12 +74,13 @@ const CustomMessageBubble = styled.View<{
     deleted,
     backgroundMessageUser,
     backgroundMessage,
+    theme,
   }) =>
     deleted
-      ? '#f5f5f5'
+      ? theme.systemMessageBackground
       : isUser
-      ? backgroundMessageUser || '#d1e7ff'
-      : backgroundMessage || '#fff'};
+      ? backgroundMessageUser || theme.messageBackgroundUser
+      : backgroundMessage || theme.messageBackground};
 `;
 
 const CustomMessageText = styled.Text<{
@@ -90,8 +92,8 @@ const CustomMessageText = styled.Text<{
 }>`
   font-size: ${({ fontSize }) => fontSize ?? 16}px;
   ${({ fontWeight }) => (fontWeight ? `font-weight: ${fontWeight};` : '')}
-  color: ${({ color, colorUser, isUser }) =>
-    isUser ? colorUser || '#333' : color || '#333'};
+  color: ${({ color, colorUser, isUser, theme }) =>
+    isUser ? colorUser || theme.messageTextUser : color || theme.messageText};
 `;
 
 const CustomMessagePhoto = styled.Image`
@@ -115,7 +117,7 @@ const CustomUserName = styled.Text<{
   padding-bottom: 8px;
   padding-left: ${({media}) => media ? '16px': 0};
   padding-top: ${({media}) => media ? '8px': 0};
-  color: ${({ color }) => color || '#333'};
+  color: ${({ color, theme }) => color || theme.text};
 `;
 
 const CustomMessageTimestamp = styled.Text<{
@@ -124,9 +126,8 @@ const CustomMessageTimestamp = styled.Text<{
   colorUser?: string;
 }>`
   font-size: 12px;
-  color: #999;
-  color: ${({ isUser, color, colorUser }) =>
-    isUser ? colorUser || '#999' : color || '#999'};
+  color: ${({ isUser, color, colorUser, theme }) =>
+    isUser ? colorUser || theme.textMuted : color || theme.textMuted};
   margin-top: 5px;
   align-self: flex-end;
 `;
@@ -144,6 +145,17 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const dispatch = useDispatch();
   const { client } = useXmppClient();
   const { config, langSource, user, translateMode } = useChatSettingState();
+  // Single theme read per message; the two colour overrides below are the
+  // only per-render allocations added for theming (memoized on the theme
+  // object, which useTheme keeps stable across renders).
+  const theme = useTheme();
+  const themedStyles = useMemo(
+    () => ({
+      muted: { color: theme.textMuted },
+      failed: { color: theme.danger },
+    }),
+    [theme]
+  );
 
   // `enableTranslates` predates the `translates` config block; keep it
   // working so existing hosts don't lose translations on upgrade.
@@ -354,7 +366,16 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // Body text size/weight is set on the parser's leaf <Text>s — the markdown
   // wraps content in <View>s which break Text-style inheritance, so the bubble
   // wrapper's fontSize alone never reached the actual text.
-  const bodyTextStyle = chatTextStyle(config?.typography?.messageText);
+  // The parser wraps paragraphs / list items in <View>s, so the bubble's
+  // text colour never reaches the leaf <Text>s by inheritance — put the
+  // ink on the base leaf style explicitly (theme-aware).
+  const bodyTextStyle = useMemo(
+    () => ({
+      ...chatTextStyle(config?.typography?.messageText),
+      color: isUser ? theme.messageTextUser : theme.messageText,
+    }),
+    [config?.typography?.messageText, isUser, theme]
+  );
   // In auto mode, render the translation as the primary body — but NEVER for
   // the reader's own messages (they wrote it; no point translating it back).
   const showInlineTranslation =
@@ -365,9 +386,10 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const messageText = config?.messageTextFilter?.enabled
     ? parseMessageBody(
         config?.messageTextFilter.filterFunction(bodyToRender),
-        bodyTextStyle
+        bodyTextStyle,
+        theme
       )
-    : parseMessageBody(bodyToRender, bodyTextStyle);
+    : parseMessageBody(bodyToRender, bodyTextStyle, theme);
 
   const isFailed = failedIdSet.has(message.id);
   const isPending =
@@ -452,12 +474,13 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             isUser={isUser}
             deleted={message.isDeleted}
             isMedia={message?.isMediafile === 'true' && !message?.isDeleted}
-            backgroundMessageUser={config?.messageColor?.backgroundMessageUser}
-            backgroundMessage={config?.messageColor?.backgroundMessage}
           >
             {!isUser && hasRealSenderName && (
               <CustomUserName
-                color={config?.colors?.primary}
+                // Historically `config.colors.primary` with a plain-text
+                // fallback; theme.primary carries the same value in light
+                // mode and the dark accent in dark mode.
+                color={config?.colors?.primary ? theme.primary : undefined}
                 media={message?.isMediafile === 'true'}
                 fontSize={config?.typography?.senderName?.fontSize}
                 fontWeight={config?.typography?.senderName?.fontWeight as any}
@@ -470,7 +493,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 handleReplyMessage={handleReplyMessage}
                 isUser={isUser}
                 text={JSON.parse(message.mainMessage).text}
-                color={config?.colors?.primary}
+                color={theme.primary}
               />
             )}
 
@@ -489,8 +512,6 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 ) : (
                   <CustomMessageText
                     isUser={isUser}
-                    colorUser={config?.messageColor?.colorUser}
-                    color={config?.messageColor?.color}
                     fontSize={config?.typography?.messageText?.fontSize}
                     fontWeight={config?.typography?.messageText?.fontWeight as any}
                   >
@@ -501,7 +522,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                       <TranslatedMessageBody
                         isUser={isUser}
                         originalText={translationDisplay.originalText}
-                        accentColor={config?.colors?.primary}
+                        accentColor={theme.primary}
                       >
                         <Text>{messageText}</Text>
                       </TranslatedMessageBody>
@@ -528,12 +549,14 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             {/* <View style={styles.timestampRow}> */}
             <CustomTimestampRow media={message?.isMediafile === 'true'}>
               {!config?.disableSentLogic && isUser && isPending && (
-                <Text style={styles.timestampText}>sending...</Text>
+                <Text style={[styles.timestampText, themedStyles.muted]}>
+                  sending...
+                </Text>
               )}
               {!config?.disableSentLogic && isUser && isFailed && (
                 <Text
                   onPress={onRetryPress}
-                  style={styles.failedText}
+                  style={[styles.failedText, themedStyles.failed]}
                   accessibilityRole="button"
                   accessibilityLabel="Retry sending message"
                 >
@@ -541,9 +564,9 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 </Text>
               )}
               {message?.isEdited && !message?.isDeleted && (
-                <Text style={styles.editedText}>edited</Text>
+                <Text style={[styles.editedText, themedStyles.muted]}>edited</Text>
               )}
-              <Text style={styles.timestampText}>
+              <Text style={[styles.timestampText, themedStyles.muted]}>
                 {new Date(message.date).toLocaleTimeString([], {
                   hour: '2-digit',
                   minute: '2-digit',
@@ -570,7 +593,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
               <MessageReaction
                 reaction={message.reaction}
                 changeReaction={handleReactionMessage}
-                color={config?.colors?.primary || '#0052CD'}
+                color={theme.primary}
                 userName={`${user.firstName} ${user.lastName}`}
               />
             )}