@ethora/chat-component-rn 26.8.2 → 26.8.4

package/src/components/ExampleComponents/CustomMessage.tsx

@@ -13,8 +13,9 @@ export const MessageContainer = styled.View<{ isUser: boolean }>`
 `;
 
 export const MessageBubble = styled.View<{ isUser: boolean }>`
-  background-color: ${(props) => (!props.isUser ? '#f1f0f0' : '#0052CD')};
-  color: ${(props) => (!props.isUser ? '#000' : '#fff')};
+  background-color: ${({ isUser, theme }) =>
+    !isUser ? theme.surfaceSecondary : theme.primary};
+  color: ${({ isUser, theme }) => (!isUser ? theme.text : theme.textOnPrimary)};
   border-radius: 12px;
   padding: 10px;
   max-width: 60%;
@@ -27,14 +28,14 @@ export const MessageText = styled.View`
 
 export const UserName = styled.Text<{ isUser: boolean; color?: string }>`
   font-weight: bold;
-  color: ${(props) =>
-    props.color ? props.color : props.isUser ? '#0052CD' : '#333'};
+  color: ${({ color, isUser, theme }) =>
+    color ? color : isUser ? theme.primary : theme.text};
   margin-right: 8px;
 `;
 
 export const MessageTimestamp = styled.Text`
   font-size: 13px;
-  color: #999;
+  color: ${({ theme }) => theme.textMuted};
   margin-left: 8px;
 `;
 
@@ -50,8 +51,8 @@ export const MessagePhotoContainer = styled.Text`
 `;
 
 export const SystemMessage = styled.Text`
-  background-color: #e0e0e0;
-  color: #555;
+  background-color: ${({ theme }) => theme.systemMessageBackground};
+  color: ${({ theme }) => theme.textSecondary};
   text-align: center;
   padding: 8px;
   border-radius: 8px;
@@ -62,7 +63,7 @@ export const SystemMessage = styled.Text`
 export const SystemMessageText = styled.Text`
   margin: 0;
   font-size: 14px;
-  color: #333;
+  color: ${({ theme }) => theme.text};
 `;
 
 const CustomMessageExample = forwardRef<View, MessageProps>(

package/src/components/ExampleComponents/CustomTypingIndicatorExamples.tsx

@@ -96,7 +96,7 @@ const Dot = styled(Animated.View)`
   width: 6px;
   height: 6px;
   border-radius: 3px;
-  background-color: #666;
+  background-color: ${({ theme }) => theme.textSecondary};
   margin: 0 2px;
 `;
 
@@ -132,7 +132,7 @@ export const MinimalTypingIndicator: React.FC<Props> = ({ isVisible }) => {
 };
 
 const Bubble = styled.View`
-  background-color: #f0f0f0;
+  background-color: ${({ theme }) => theme.surfaceSecondary};
   border-radius: 18px;
   padding: 8px 16px;
   margin: 4px 0;
@@ -142,7 +142,7 @@ const Bubble = styled.View`
 
 const BubbleText = styled.Text`
   font-size: 14px;
-  color: #666;
+  color: ${({ theme }) => theme.textSecondary};
 `;
 
 const BubbleTail = styled.View`
@@ -156,7 +156,7 @@ const BubbleTail = styled.View`
   border-top-width: 6px;
   border-left-color: transparent;
   border-right-color: transparent;
-  border-top-color: #f0f0f0;
+  border-top-color: ${({ theme }) => theme.surfaceSecondary};
 `;
 
 const BubbleWrapper = styled.View`
@@ -187,7 +187,7 @@ const ProgressWrap = styled.View`
 
 const ProgressLabel = styled.Text`
   font-size: 12px;
-  color: #666;
+  color: ${({ theme }) => theme.textSecondary};
   margin-right: 8px;
 `;
 
@@ -202,7 +202,7 @@ const Bar = styled.View`
 const Runner = styled(Animated.View)`
   width: 60px;
   height: 4px;
-  background-color: #007bff;
+  background-color: ${({ theme }) => theme.primary};
 `;
 
 export const ProgressTypingIndicator: React.FC<Props> = ({ text, isVisible }) => {

package/src/components/Header/HeaderRoomList.tsx

@@ -7,6 +7,7 @@ import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlacehold
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { BurgerMenuIcon } from '../../assets/icons';
 import Button from '../styled/Button';
+import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
 
 interface HeaderRoomListProps {
@@ -15,6 +16,7 @@ interface HeaderRoomListProps {
 
 export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   const { config, user, selectedUser } = useChatSettingState();
+  const theme = useTheme();
   const t = useT();
   const insets = useSafeAreaInsets();
   const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
@@ -39,7 +41,13 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   }, [config?.backgroundChat?.image]);
 
   return (
-    <View style={[styles.headerContainer, topInset ? { paddingTop: 16 + topInset } : null]}>
+    <View
+      style={[
+        styles.headerContainer,
+        { backgroundColor: theme.surface, shadowColor: theme.shadow },
+        topInset ? { paddingTop: 16 + topInset } : null,
+      ]}
+    >
       {!config?.disableRoomMenu && config?.headerMenu ? (
         <View style={styles.leftContainer}>
           <Button
@@ -47,7 +55,7 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
             style={styles.menuButton}
             color="black"
             unstyled
-            EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+            EndIcon={<BurgerMenuIcon color={theme.icon} />}
             onPress={() =>
               typeof config?.headerMenu === 'function'
                 ? config.headerMenu()
@@ -62,7 +70,7 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
         {config?.headerLogo ? (
           HeaderLogo
         ) : (
-          <Text style={{ fontWeight: 500, fontSize: 18 }}>
+          <Text style={{ fontWeight: 500, fontSize: 18, color: theme.text }}>
             {t('roomList.title')}
           </Text>
         )}
@@ -91,11 +99,8 @@ const styles = StyleSheet.create({
     paddingBottom: 12,
     minHeight: 56,
     justifyContent: 'space-between',
-    backgroundColor: '#FFFFFF',
     borderBottomLeftRadius: 20,
     borderBottomRightRadius: 20,
-    // Lifts the header off the page ground behind it.
-    shadowColor: '#101828',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.06,
     shadowRadius: 12,

package/src/components/InputComponents/Search.tsx

@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   TextInputProps,
 } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 const shouldForwardProp = (prop: string) =>
   prop !== 'animated' && prop !== 'expanded' && prop !== 'direction';
@@ -18,7 +19,7 @@ const SearchInputWrapper = styled.View.withConfig({ shouldForwardProp })<{
   position: relative;
   flex-direction: row;
   align-items: center;
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.surface};
   border-radius: 16px;
   height: 44px;
   padding: 0 12px;
@@ -40,7 +41,7 @@ const SearchIcon = styled(TouchableOpacity)<{
   margin-right: 8px;
   align-items: center;
   justify-content: center;
-  color: #999;
+  color: ${({ theme }) => theme.textMuted};
 `;
 
 const StyledInput = styled(TextInput)<{
@@ -51,7 +52,7 @@ const StyledInput = styled(TextInput)<{
   border: none;
   flex: 1;
   font-size: 16px;
-  color: #000;
+  color: ${({ theme }) => theme.text};
   opacity: ${({ animated, expanded }) => (animated && !expanded ? 0 : 1)};
   display: ${({ animated, expanded }) =>
     animated && !expanded ? 'none' : 'flex'};
@@ -77,6 +78,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
   placeholder,
   ...props
 }) => {
+  const theme = useTheme();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
   const inputRef = useRef<TextInput | null>(null);
@@ -128,7 +130,8 @@ const SearchInput: React.FC<SearchInputProps> = ({
         expanded={isExpanded}
         onChangeText={handleInput}
         placeholder={placeholder}
-        placeholderTextColor="#999"
+        placeholderTextColor={theme.textMuted}
+        keyboardAppearance={theme.dark ? 'dark' : 'light'}
         {...props}
       />
     </SearchInputWrapper>

package/src/components/MainComponents/ChatHeader.tsx

@@ -33,6 +33,7 @@ import { useFileToken } from '../../hooks/useFileToken';
 import { appendFileToken } from '../../helpers/secureFileUrl';
 import { View, StyleSheet, Text, Keyboard } from 'react-native';
 import { getIconColor } from '../../helpers/getIconColor';
+import { useTheme } from '../../hooks/useTheme';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
 import { getElementFont } from '../../helpers/getElementFont';
 import { useT } from '../../i18n/useT';
@@ -54,6 +55,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   const roomState = useRoomState(currentRoom.jid).room;
   const composing = roomState?.composing;
   const { config } = useChatSettingState();
+  const theme = useTheme();
   const t = useT();
 
   const handleChangeChat = (chat: IRoom) => {
@@ -100,7 +102,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
         {handleBackClick && !config?.headerChatMenu ? (
           <View style={styles.leftContainer}>
             <Button
-              EndIcon={<BackIcon />}
+              EndIcon={<BackIcon color={theme.textSecondary} />}
               onPress={() => handleBackClick(false)}
             />
           </View>
@@ -108,7 +110,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
           <View style={styles.leftContainer}>
             <Button
               style={styles.menuButton}
-              color="black"
+              color={theme.text}
               unstyled
               EndIcon={<BurgerMenuIcon color={getIconColor(config)} />}
               onPress={handleHeaderChatMenu}
@@ -180,7 +182,11 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                   <Composing usersTyping={currentRoom?.composingList} />
                 ) : config?.disableUserCount ? undefined : (
                   <ChatContainerHeaderLabel
-                    style={[styles.subLabel, getElementFont(config, 'headerSubtitle')]}
+                    style={[
+                      styles.subLabel,
+                      { color: theme.textSecondary },
+                      getElementFont(config, 'headerSubtitle'),
+                    ]}
                   >
                     <Text>
                       {t(

package/src/components/MainComponents/ChatRoom.tsx

@@ -30,6 +30,7 @@ import { IConfig } from '../../types/models/config.model';
 import { useRoomInitialization } from '../../hooks/useRoomInitialization';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
 import { isOwnMessage } from '../../helpers/isOwnMessage';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 // import {PanGestureHandler} from 'react-native-gesture-handler';
@@ -82,6 +83,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     const { client } = useXmppClient();
     const dispatch = useDispatch();
     const insets = useSafeAreaInsets();
+    const theme = useTheme();
 
     const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
 
@@ -408,10 +410,10 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       // a square white block behind a rounded composer just hid the corners.
       style: {
         paddingBottom: inputDockPaddingBottom,
-        backgroundColor: '#fff',
+        backgroundColor: theme.surface,
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
-        shadowColor: '#101828',
+        shadowColor: theme.shadow,
         shadowOffset: { width: 0, height: -4 },
         shadowOpacity: 0.06,
         shadowRadius: 12,
@@ -464,6 +466,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               >
                 <EmptyChatIllustration
                   color={getIconColor(configWithEventHandlers)}
+                  panelColor={theme.dark ? theme.surfaceSecondary : undefined}
                 />
               </View>
             ) : !roomMessages || roomMessages.length === 0 ? (

package/src/components/MainComponents/ChatWrapper.tsx

@@ -35,6 +35,7 @@ import Modal from '../Modals/Modal/Modal';
 import ThreadWrapper from '../Thread/ThreadWrapper';
 import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
+import {useTheme} from '../../hooks/useTheme';
 import { usePendingNotification } from '../../hooks/usePendingNotification';
 import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
@@ -68,6 +69,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
   } = useChatSettingState();
 
   usePendingNotification();
+  const theme = useTheme();
 
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
@@ -437,7 +439,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
           <View
             style={{
               padding: 20,
-              backgroundColor: '#fff',
+              backgroundColor: theme.surface,
               borderRadius: 12,
               maxWidth: 320,
               alignItems: 'stretch',
@@ -447,11 +449,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 fontSize: 16,
                 fontWeight: '600',
                 marginBottom: 8,
-                color: '#222',
+                color: theme.text,
               }}>
               Connection error
             </Text>
-            <Text style={{fontSize: 13, color: '#444', marginBottom: 16}}>
+            <Text style={{fontSize: 13, color: theme.textSecondary, marginBottom: 16}}>
               {errorMsg ?? 'Something went wrong while connecting to chat.'}
             </Text>
             <Pressable
@@ -468,10 +470,10 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 paddingVertical: 10,
                 paddingHorizontal: 16,
                 borderRadius: 6,
-                backgroundColor: pressed ? '#0040A0' : '#0052CD',
+                backgroundColor: pressed ? '#0040A0' : theme.primary,
                 alignItems: 'center',
               })}>
-              <Text style={{color: '#fff', fontWeight: '600'}}>Retry</Text>
+              <Text style={{color: theme.textOnPrimary, fontWeight: '600'}}>Retry</Text>
             </Pressable>
           </View>
         </Overlay>
@@ -521,7 +523,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 title="Delete Message"
                 description="Are you sure you want to delete this message?"
                 buttonText="Delete"
-                backgroundColorButton="#E53935"
+                backgroundColorButton={theme.danger}
                 handleClick={handleDeleteClick}
                 handleCloseModal={handleCloseDeleteModal}
                 compact

package/src/components/MainComponents/LanguageSelectorModal.tsx

@@ -24,6 +24,7 @@ import {
 import { useT } from '../../i18n/useT';
 import { toBaseLanguage } from '../../i18n/strings';
 import { getIconColor } from '../../helpers/getIconColor';
+import { useTheme } from '../../hooks/useTheme';
 
 const TEXT_PRIMARY = '#141414';
 const TEXT_MUTED = '#8C8C8C';
@@ -73,6 +74,7 @@ export const LanguageSelectorModal: FC<{
   const dispatch = useDispatch();
   const t = useT();
   const { config, langSource, translateMode } = useChatSettingState();
+  const theme = useTheme();
 
   const translates = config?.translates;
   const effectiveMode = resolveTranslateMode(translates, translateMode);
@@ -97,16 +99,34 @@ export const LanguageSelectorModal: FC<{
     >
       {/* Backdrop closes on tap; the card swallows the press so a tap
           inside it doesn't dismiss. */}
-      <Pressable style={styles.backdrop} onPress={onClose}>
-        <Pressable style={styles.card} onPress={() => {}}>
-          <Text style={styles.title}>{t('language.select')}</Text>
+      <Pressable
+        style={[
+          styles.backdrop,
+          // Keep the historical 0.4 scrim in light; the dark palette's
+          // heavier overlay is needed to separate the card from the ground.
+          theme.dark && { backgroundColor: theme.overlay },
+        ]}
+        onPress={onClose}
+      >
+        <Pressable
+          style={[styles.card, { backgroundColor: theme.surface }]}
+          onPress={() => {}}
+        >
+          <Text style={[styles.title, { color: theme.text }]}>
+            {t('language.select')}
+          </Text>
 
           {showModeSwitcher && (
             <View style={styles.section}>
-              <Text style={styles.sectionLabel}>
+              <Text style={[styles.sectionLabel, { color: theme.textSecondary }]}>
                 {t('translation.modeLabel')}
               </Text>
-              <View style={styles.segmented}>
+              <View
+                style={[
+                  styles.segmented,
+                  { backgroundColor: theme.surfaceSecondary },
+                ]}
+              >
                 {(['auto', 'manual'] as const).map((mode) => {
                   const selected = effectiveMode === mode;
                   return (
@@ -118,12 +138,15 @@ export const LanguageSelectorModal: FC<{
                       style={[
                         styles.segment,
                         selected && styles.segmentSelected,
+                        selected && { backgroundColor: theme.surface },
                       ]}
                     >
                       <Text
                         style={[
                           styles.segmentText,
+                          { color: theme.textSecondary },
                           selected && styles.segmentTextSelected,
+                          selected && { color: theme.text },
                         ]}
                       >
                         {mode === 'auto'
@@ -139,7 +162,9 @@ export const LanguageSelectorModal: FC<{
 
           {showLanguageList && (
             <View style={styles.section}>
-              <Text style={styles.sectionLabel}>{t('language.select')}</Text>
+              <Text style={[styles.sectionLabel, { color: theme.textSecondary }]}>
+                {t('language.select')}
+              </Text>
               <ScrollView style={styles.list}>
                 {LANGUAGE_OPTIONS.map((option) => {
                   // Compare on the base language so a reader on "fr" still
@@ -153,11 +178,12 @@ export const LanguageSelectorModal: FC<{
                       accessibilityRole="radio"
                       accessibilityState={{ selected }}
                       onPress={() => selectLanguage(option.id)}
-                      style={styles.listRow}
+                      style={[styles.listRow, { borderBottomColor: theme.border }]}
                     >
                       <Text
                         style={[
                           styles.listRowText,
+                          { color: theme.text },
                           selected && styles.listRowTextSelected,
                         ]}
                       >

package/src/components/MainComponents/MediaMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { IMessage } from '../../types/types';
 import FileDownload from '../styled/UnsupportedType';
 import CustomMessageImage from '../styled/MessageImage';
@@ -15,9 +15,9 @@ import { isLikelyAudio } from '../../helpers/mimeToExtension';
 import { getDisplayFileName } from '../../helpers/getDisplayFileName';
 import { FileIcon, PlayIcon } from '../../assets/icons';
 import { defaultMediaDims } from '../../helpers/mediaDimensions';
-import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useFileToken } from '../../hooks/useFileToken';
 import { appendFileToken } from '../../helpers/secureFileUrl';
+import { useTheme } from '../../hooks/useTheme';
 
 interface MediaMessageProps {
   mimeType?: string;
@@ -52,23 +52,37 @@ const PendingMediaMessage: React.FC<{
   isUser: boolean;
   size?: string;
 }> = ({ fileName, mimeType, previewUri, isUser, size }) => {
-  const { config } = useChatSettingState();
+  const theme = useTheme();
   const statusLabel = getPendingStatusLabel(mimeType);
   const isImage = mimeType?.startsWith('image/');
   const isVideo = mimeType?.startsWith('video/');
   const isAudio =
     mimeType?.startsWith('audio/') ||
     mimeType?.includes('application/octet-stream');
-  const primaryColor = config?.colors?.primary || '#0A84FF';
+  const primaryColor = theme.primary;
+  // Colour overrides only; layout stays in the static StyleSheet below.
+  const t = useMemo(
+    () => ({
+      card: { backgroundColor: theme.surfaceSecondary },
+      preview: { backgroundColor: theme.surfaceHighlight },
+      text: { color: theme.text },
+      secondary: { color: theme.textSecondary },
+      track: { backgroundColor: theme.border },
+      pill: { backgroundColor: theme.surface },
+    }),
+    [theme]
+  );
 
   if (isImage && previewUri) {
     return (
-      <View style={styles.pendingImageWrapper}>
+      <View style={[styles.pendingImageWrapper, t.card]}>
         <Image
           source={{ uri: previewUri }}
           style={styles.pendingImage}
           resizeMode="cover"
         />
+        {/* Scrim + white label sit on top of the image itself, so they
+            stay hard-coded: they must read on the photo, not the theme. */}
         <View style={styles.pendingImageOverlay}>
           <ActivityIndicator size="small" color="#FFFFFF" />
           <Text style={styles.pendingOverlayText}>{statusLabel}</Text>
@@ -79,32 +93,34 @@ const PendingMediaMessage: React.FC<{
 
   if (isVideo) {
     return (
-      <View style={styles.pendingVideoCard}>
-        <View style={styles.pendingVideoPreview}>
+      <View style={[styles.pendingVideoCard, t.card]}>
+        <View style={[styles.pendingVideoPreview, t.preview]}>
           <View style={styles.pendingVideoIcon}>
             <PlayIcon width={24} height={24} />
           </View>
-          <ActivityIndicator size="small" color="#5B6B8C" />
+          <ActivityIndicator size="small" color={theme.textSecondary} />
         </View>
-        <Text style={styles.pendingVideoLabel}>{fileName}</Text>
-        <Text style={styles.pendingVideoStatus}>{statusLabel}</Text>
+        <Text style={[styles.pendingVideoLabel, t.text]}>{fileName}</Text>
+        <Text style={[styles.pendingVideoStatus, t.secondary]}>
+          {statusLabel}
+        </Text>
       </View>
     );
   }
 
   if (isAudio) {
     return (
-      <View style={styles.pendingAudioCard}>
+      <View style={[styles.pendingAudioCard, t.card]}>
         <View
           style={[
             styles.pendingAudioButton,
             { backgroundColor: primaryColor },
           ]}
         >
-          <PlayIcon width={18} height={18} color="#fff" />
+          <PlayIcon width={18} height={18} color={theme.textOnPrimary} />
         </View>
         <View style={styles.pendingAudioContent}>
-          <View style={styles.pendingAudioTrack}>
+          <View style={[styles.pendingAudioTrack, t.track]}>
             <View
               style={[
                 styles.pendingAudioTrackFill,
@@ -113,10 +129,12 @@ const PendingMediaMessage: React.FC<{
             />
           </View>
           <View style={styles.pendingAudioMeta}>
-            <Text style={styles.pendingAudioTime}>0:00</Text>
-            <View style={styles.pendingAudioStatusPill}>
-              <ActivityIndicator size="small" color="#5B6B8C" />
-              <Text style={styles.pendingAudioStatusText}>{statusLabel}</Text>
+            <Text style={[styles.pendingAudioTime, t.secondary]}>0:00</Text>
+            <View style={[styles.pendingAudioStatusPill, t.pill]}>
+              <ActivityIndicator size="small" color={theme.textSecondary} />
+              <Text style={[styles.pendingAudioStatusText, t.secondary]}>
+                {statusLabel}
+              </Text>
             </View>
           </View>
         </View>
@@ -145,6 +163,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
   isUser,
 }) => {
   const fileToken = useFileToken();
+  const theme = useTheme();
   const location = appendFileToken(rawLocation, fileToken);
   const messageText = appendFileToken(rawMessageText, fileToken);
 
@@ -263,7 +282,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
       }
     }
   }
-  return <Text>Unsupported media type</Text>;
+  return <Text style={{ color: theme.text }}>Unsupported media type</Text>;
 };
 
 export default MediaMessage;

package/src/components/MainComponents/MessageList.tsx

@@ -29,6 +29,7 @@ import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getChatBackgroundColor } from '../../helpers/getChatBackground';
+import { useTheme } from '../../hooks/useTheme';
 import { isOwnMessage } from '../../helpers/isOwnMessage';
 
 interface MessageListProps<TMessage extends IMessage> {
@@ -81,6 +82,7 @@ const MessageList = <TMessage extends IMessage>({
 }: MessageListProps<TMessage>) => {
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
+  const theme = useTheme();
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
   const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -473,16 +475,24 @@ const MessageList = <TMessage extends IMessage>({
         <TouchableOpacity
           style={[
             styles.newMessageIndicator,
-            { backgroundColor: getIconColor(config) },
+            {
+              backgroundColor: getIconColor(config),
+              shadowColor: theme.shadow,
+            },
           ]}
           onPress={handleNewMessageIndicatorPress}
         >
           {/* White chevron on the saturated FAB. The icon's default
               color is white, which was invisible against the previous
               light `secondary` background — hence "no icon". */}
-          <ArowDownIcon color="#FFFFFF" width={22} height={22} />
+          <ArowDownIcon color={theme.textOnPrimary} width={22} height={22} />
           {unreadWhileScrolledUp > 0 && (
-            <View style={styles.newMessageBadge}>
+            <View
+              style={[
+                styles.newMessageBadge,
+                { backgroundColor: theme.danger, borderColor: theme.surface },
+              ]}
+            >
               <Text style={styles.newMessageBadgeText}>
                 {unreadWhileScrolledUp > 99 ? '99+' : unreadWhileScrolledUp}
               </Text>

package/src/components/MainComponents/RNStyled.tsx

@@ -12,23 +12,23 @@ export const Container = styled.View`
 
 export const Message = styled.Text`
   font-size: 16px;
-  color: #333;
+  color: ${({theme}) => theme.text};
 `;
 
 export const OrDelimiter = styled.Text`
   font-size: 14px;
-  color: #666;
+  color: ${({theme}) => theme.textSecondary};
 `;
 
 export const CustomButton = styled.TouchableOpacity`
   width: 100%;
-  background-color: #007bff;
+  background-color: ${({theme}) => theme.primary};
   padding: 10px;
   border-radius: 4px;
   align-items: center;
 `;
 
 export const ButtonText = styled.Text`
-  color: #fff;
+  color: ${({theme}) => theme.textOnPrimary};
   font-size: 16px;
 `;