@ethora/chat-component-rn 26.8.2 → 26.8.4

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -17,6 +17,8 @@ import Composing from '../styled/StyledInputComponents/Composing';
 import { Text, View } from 'react-native';
 import LastMessageItem from './LastMessageItem';
 import { LastRoomMessageText } from './styled/StyledRoomComponents';
+import { useTheme } from '../../hooks/useTheme';
+import { resolveTheme } from '../../theme/theme';
 
 interface ChatRoomItemProps {
   chat: IRoom;
@@ -31,6 +33,13 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   isDriver,
   config,
 }) => {
+  // Rows can be rendered with an explicit `config` prop (tests, hosts
+  // composing their own list); honour its colours over the store's.
+  const storeTheme = useTheme();
+  const theme = useMemo(
+    () => (config ? resolveTheme(config) : storeTheme),
+    [config, storeTheme]
+  );
   // Room icons can live on the membership-gated secure-files host.
   const fileToken = useFileToken();
   const displayName = String(chat?.title || chat?.name || '').trim();
@@ -150,9 +159,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           paddingVertical: 8,
           paddingRight: 8,
           borderBottomWidth: 1,
-          // Reads against the list's #E8EDF2 ground; #F0F0F0 was lighter
-          // than the ground itself, so the row separators vanished.
-          borderBottomColor: '#C6CFDA',
+          // `divider` reads against the list ground; the lighter border
+          // tone was paler than the ground itself, so the separators vanished.
+          borderBottomColor: theme.divider,
         }}
       >
         <View
@@ -167,7 +176,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           {stamp ? (
             <UserCount
               style={{
-                color: '#8C8C8C',
+                color: theme.textSecondary,
                 fontSize: 12,
               }}
               text={stamp}
@@ -239,7 +248,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
             <View
               style={{
                 borderRadius: 8,
-                backgroundColor: config?.colors?.primary,
+                backgroundColor: theme.primary,
                 padding: 2,
                 minWidth: 24,
                 minHeight: 24,
@@ -252,7 +261,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
               <Text
                 style={{
                   // color: isChatActive ? "#141414" : "#fff",
-                  color: '#141414',
+                  color: theme.text,
                   fontSize: 14,
                   fontWeight: '600',
                 }}
@@ -263,11 +272,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           ) : null}
         </View>
         {isDriver && (
-          // Darker than the list's own ground (#E8EDF2), otherwise the
-          // separator disappears into it — white and the old #0052CD0D
-          // hairline both did.
+          // Darker than the list's own ground, otherwise the separator
+          // disappears into it — white and the old highlight hairline both
+          // did.
           <View
-            style={{ height: 1, backgroundColor: '#C6CFDA', marginTop: 8 }}
+            style={{ height: 1, backgroundColor: theme.divider, marginTop: 8 }}
           />
         )}
       </View>

package/src/components/RoomComponents/styled/LastAudioMessage.tsx

@@ -8,6 +8,7 @@ import { LastMessage } from '../../../types/types';
 import styled from 'styled-components/native';
 import { View } from 'react-native';
 import { PlayIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
 
 interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'body'> {}
 
@@ -18,7 +19,7 @@ const PlayButton = styled.View`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #d8ecff;
+  background-color: ${({ theme }) => (theme.dark ? theme.surfaceSecondary : '#d8ecff')};
   margin-top: 1px;
 `;
 
@@ -29,12 +30,13 @@ const AudioRow = styled.View`
 `;
 
 const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
+  const theme = useTheme();
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName numberOfLines={1}>{user?.name ?? ''}</LastRoomMessageName>
       <AudioRow>
         <PlayButton>
-          <PlayIcon width={10} height={10} color="#1F2937" />
+          <PlayIcon width={10} height={10} color={theme.dark ? theme.text : '#1F2937'} />
         </PlayButton>
         <LastRoomMessageText numberOfLines={1}>
           {body?.trim() ? body : 'audio'}

package/src/components/RoomComponents/styled/StyledRoomComponents.ts

@@ -12,9 +12,11 @@ export const LastRoomMessageContainer = styled.View`
 export const LastRoomMessageName = styled.Text`
   font-weight: 600;
   max-width: 190px;
+  color: ${({ theme }) => theme.text};
 `;
 
 export const LastRoomMessageText = styled.Text`
+  color: ${({ theme }) => theme.textSecondary};
   max-width: 190px;
   flex-shrink: 1;
   flex-wrap: nowrap;

package/src/components/Thread/ThreadWrapper.tsx

@@ -22,6 +22,7 @@ import { useSendMessage } from '../../hooks/useSendMessage';
 import { createMainMessageForThread } from '../../helpers/createMainMessageForThread';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
 import {
   Animated,
   Text,
@@ -51,6 +52,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
 
   const { loading, roomsList, editAction, activeRoomJID } = useRoomState();
   const { config } = useChatSettingState();
+  const theme = useTheme();
   const { sendMessage: sendMs, sendMedia: sendMessageMedia, sendEditMessage, isLastMessageFromUserAndProcessing } = useSendMessage();
 
   const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
@@ -179,6 +181,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
       {...panResponder.panHandlers}
       style={[
         styles.threadContainer,
+        { backgroundColor: theme.chatBackground },
         { transform: [{ translateX: slideAnim }] },
         // ...config?.chatRoomStyles,
       ]}
@@ -199,17 +202,15 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
       />
       <AlsoContainer onPress={() => setIsChecked((prev) => !prev)}>
         <AlsoCheckbox
-          accentColor={
-            isChecked ? config?.colors?.primary || '#0052CD' : '#fff'
-          }
+          accentColor={isChecked ? theme.primary : theme.surface}
           // checked={isChecked}
           // onPress={() => setIsChecked(!isChecked)}
         />
-        <Text>Also send to</Text>
+        <Text style={{ color: theme.text }}>Also send to</Text>
         <TouchableOpacity onPress={closeThread}>
           <Text
             style={{
-              color: config?.colors?.primary || '#0052CD',
+              color: theme.primary,
               fontWeight: 500,
             }}
           >

package/src/components/Toast/Toast.tsx

@@ -32,7 +32,7 @@ const ToastContainer = styled(Animated.View)<{ type: string }>`
   border-radius: 6px;
   margin-bottom: 8px;
   width: 240px;
-  shadow-color: #000;
+  shadow-color: ${({ theme }) => theme.shadow};
   shadow-offset: 0px 2px;
   shadow-opacity: 0.2;
   shadow-radius: 4px;

package/src/components/styled/AudioMessage.tsx

@@ -17,7 +17,7 @@ import {
 import * as FileSystem from 'expo-file-system/legacy';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import { PauseIcon, PlayIcon } from '../../assets/icons';
-import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
 import { getIosAudioPlaybackCacheExtension } from '../../helpers/mimeToExtension';
 import { pushLog as devPushLog } from '../../utils/devLogger';
 
@@ -319,7 +319,7 @@ const AudioMessage = ({
   fileName,
   originalName,
 }: AudioMessageProps) => {
-  const { config } = useChatSettingState();
+  const theme = useTheme();
   const soundRef = useRef<AudioPlayer | null>(null);
   // expo-audio delivers progress through an event subscription instead of
   // expo-av's `onPlaybackStatusUpdate` callback argument, so the handle has
@@ -339,7 +339,10 @@ const AudioMessage = ({
   const [position, setPosition] = useState(0);
   const [duration, setDuration] = useState(0);
   const [webViewEnabled, setWebViewEnabled] = useState(false);
-  const primaryColor = config?.colors?.primary || '#0A84FF';
+  const primaryColor = theme.primary;
+  const onPrimary = theme.textOnPrimary;
+  const trackStyle = { backgroundColor: theme.border };
+  const timeStyle = { color: theme.textSecondary };
 
   const clearLoadingGuard = () => {
     if (loadingTimerRef.current) {
@@ -760,19 +763,19 @@ const AudioMessage = ({
           activeOpacity={0.85}
         >
           {isLoading ? (
-            <ActivityIndicator size="small" color="#fff" />
+            <ActivityIndicator size="small" color={onPrimary} />
           ) : (
             <View style={styles.iconWrap}>
               {isPlaying ? (
-                <PauseIcon width={18} height={18} color="#fff" />
+                <PauseIcon width={18} height={18} color={onPrimary} />
               ) : (
-                <PlayIcon width={18} height={18} color="#fff" />
+                <PlayIcon width={18} height={18} color={onPrimary} />
               )}
             </View>
           )}
         </TouchableOpacity>
         <View style={styles.progressContainer}>
-          <View style={styles.progressTrack}>
+          <View style={[styles.progressTrack, trackStyle]}>
             <View
               style={[
                 styles.progressFill,
@@ -781,12 +784,12 @@ const AudioMessage = ({
             />
           </View>
           <View style={styles.progressRow}>
-            <Text style={styles.time}>
+            <Text style={[styles.time, timeStyle]}>
               {playbackError ? 'Audio unavailable' : formatTime(position)}
             </Text>
             {/* Always render the right slot (empty until known) so the row
                 never reflows when the duration appears after decoding. */}
-            <Text style={styles.time}>
+            <Text style={[styles.time, timeStyle]}>
               {!playbackError && duration > 0 ? formatTime(duration) : ''}
             </Text>
           </View>

package/src/components/styled/Button.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement, ReactNode } from 'react';
-import styled from 'styled-components/native';
+import React, { ReactElement, ReactNode, useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components/native';
 import {
   TouchableOpacity,
   View,
@@ -20,10 +20,10 @@ const CustomButton = styled(TouchableOpacity)<{
   variant?: 'default' | 'filled' | 'outlined';
 }>`
   border-width: ${({ variant }) => (variant === 'outlined' ? 1 : 0)}px;
-  border-color: ${({ borderColor }) => borderColor || '#0052CD'};
+  border-color: ${({ borderColor, theme }) => borderColor || theme.primary};
   border-radius: 20px;
-  background-color: ${({ variant, backgroundColor }) =>
-    variant === 'filled' ? backgroundColor || '#0052CD' : 'transparent'};
+  background-color: ${({ variant, backgroundColor, theme }) =>
+    variant === 'filled' ? backgroundColor || theme.primary : 'transparent'};
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -38,8 +38,10 @@ const ButtonText = styled.Text<{
   variant?: 'default' | 'filled' | 'outlined';
   backgroundColor?: string;
 }>`
-  color: ${({ variant, backgroundColor }) =>
-    variant === 'filled' ? '#FFFFFF' : backgroundColor || '#0052CD'};
+  color: ${({ variant, backgroundColor, theme }) =>
+    variant === 'filled'
+      ? theme.textOnPrimary
+      : backgroundColor || theme.primary};
   font-size: ${PixelRatio.getFontScale() * 14}px;
   font-weight: bold;
 `;
@@ -83,6 +85,11 @@ const Button: React.FC<ButtonProps> = ({
   accessibilityLabel,
 }) => {
   const iconOnly = !loading && !children && !text && !StartIcon && !!EndIcon;
+  // Theme from the styled ThemeProvider. `useContext` (not styled's
+  // `useTheme`) so rendering outside the provider — isolated tests — does
+  // not throw; the inline label colour then falls back to the historical
+  // black.
+  const theme = useContext(ThemeContext);
 
   return (
     <CustomButton
@@ -100,7 +107,7 @@ const Button: React.FC<ButtonProps> = ({
       {!loading && children}
       {!loading && !children && typeof text !== 'undefined' && (
         <ButtonText
-          style={[{ color: color || 'black' }]}
+          style={[{ color: color || theme?.text || 'black' }]}
           variant={variant}
           backgroundColor={backgroundColor}
         >

package/src/components/styled/DateLabel.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components/native';
 import { Line } from './StyledComponents';
 import { Text } from 'react-native';
-import { getDateLabelColor } from '../../helpers/getDateLabelColor';
+import { useTheme } from '../../hooks/useTheme';
 import { useT, useUiLocale } from '../../i18n/useT';
 
 interface DateLabelProps {
@@ -71,12 +71,16 @@ const DateLabel: React.FC<DateLabelProps> = ({ date, colors }) => {
     label = date.toLocaleDateString(uiLocale, options);
   }
 
-  const textColor = getDateLabelColor({ colors });
+  // Theme-aware: dark mode ignores the light-only `colors` knobs (the
+  // theme already folds `colors.dateLabel` / `colors.primary` in light).
+  const theme = useTheme();
+  const textColor = theme.dateLabel;
+  const bgColor = theme.dark ? theme.surfaceSecondary : colors?.secondary;
 
   return (
     <Container>
       <Line />
-      <StyledDateLabel bgColor={colors?.secondary}>
+      <StyledDateLabel bgColor={bgColor}>
         <StyledDateText color={textColor}>{label}</StyledDateText>
       </StyledDateLabel>
       <Line />

package/src/components/styled/MediaModal.tsx

@@ -1,7 +1,8 @@
 /** @format */
 
-import React from 'react';
-import { View, Modal, StyleSheet, ViewStyle, Text } from 'react-native';
+import React from "react";
+import { View, Modal, StyleSheet, ViewStyle, Text } from "react-native";
+import { useTheme } from "../../hooks/useTheme";
 
 interface OverlayProps {
   children?: React.ReactNode;
@@ -9,18 +10,23 @@ interface OverlayProps {
   style?: ViewStyle;
 }
 
-export const Overlay = ({ children, visible, style }: OverlayProps) => (
-  <Modal
-    transparent={true}
-    animationType="fade"
-    visible={visible}
-    onRequestClose={() => {
-      // Implement logic to close the modal if needed
-    }}
-  >
-    <View style={[styles.modal, style]}>{children}</View>
-  </Modal>
-);
+export const Overlay = ({ children, visible, style }: OverlayProps) => {
+  const theme = useTheme();
+  return (
+    <Modal
+      transparent={true}
+      animationType="fade"
+      visible={visible}
+      onRequestClose={() => {
+        // Implement logic to close the modal if needed
+      }}
+    >
+      <View style={[styles.modal, { backgroundColor: theme.surface }, style]}>
+        {children}
+      </View>
+    </Modal>
+  );
+};
 
 export const StyledModal = ({
   children,
@@ -34,22 +40,21 @@ export const StyledModal = ({
 
 const styles = StyleSheet.create({
   overlay: {
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     zIndex: 999, // Use zIndex for stacking, although this won't work in all cases, Android uses elevation.
     elevation: 999, // Added to give the overlay layer a higher stacking context on Android.
   },
   modal: {
     flex: 1,
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'white',
+    width: "100%",
+    height: "100%",
+    backgroundColor: "white",
     padding: 0,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   },
-})
-
+});

package/src/components/styled/RoomListComponents/index.tsx

@@ -7,6 +7,7 @@ import {
   TextStyle,
 } from 'react-native';
 import { getTintedColor } from '../../../helpers/getTintedColor';
+import { useTheme } from '../../../hooks/useTheme';
 
 // Container with burger menu support
 export const Container = ({
@@ -17,24 +18,34 @@ export const Container = ({
   burgerMenu?: boolean;
   open?: boolean;
   children: React.ReactNode;
-}) => (
-  <View
-    style={[
-      styles.container,
-      burgerMenu && open ? styles.containerOpen : styles.containerClosed,
-      burgerMenu && styles.burgerMenu,
-    ]}
-  >
-    {children}
-  </View>
-);
+}) => {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme.surface },
+        burgerMenu && open ? styles.containerOpen : styles.containerClosed,
+        burgerMenu && [
+          styles.burgerMenu,
+          { backgroundColor: theme.surface, borderRightColor: theme.border },
+        ],
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
 
 // Button for the burger menu
-export const BurgerButton = ({ onPress }: { onPress: () => void }) => (
-  <TouchableOpacity style={styles.burgerButton} onPress={onPress}>
-    <Text style={styles.burgerButtonText}>☰</Text>
-  </TouchableOpacity>
-);
+export const BurgerButton = ({ onPress }: { onPress: () => void }) => {
+  const theme = useTheme();
+  return (
+    <TouchableOpacity style={styles.burgerButton} onPress={onPress}>
+      <Text style={[styles.burgerButtonText, { color: theme.text }]}>☰</Text>
+    </TouchableOpacity>
+  );
+};
 
 // Chat item
 const ColorContext = createContext<string | undefined>(undefined);
@@ -71,17 +82,31 @@ export const ChatInfo = ({ children }: { children: React.ReactNode }) => (
 // One line, ellipsised. Without this a long room title (or a display name
 // that happens to be an email) wrapped to three or four lines and pushed
 // the whole row's height around.
-export const ChatName = ({ text }: { text: string }) => (
-  <Text style={styles.chatName} numberOfLines={1} ellipsizeMode="tail">
-    {text}
-  </Text>
-);
+export const ChatName = ({ text }: { text: string }) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[styles.chatName, { color: theme.text }]}
+      numberOfLines={1}
+      ellipsizeMode="tail"
+    >
+      {text}
+    </Text>
+  );
+};
 
-export const LastMessage = ({ children }: { children: React.ReactNode }) => (
-  <Text style={styles.lastMessage} numberOfLines={1} ellipsizeMode="tail">
-    {children}
-  </Text>
-);
+export const LastMessage = ({ children }: { children: React.ReactNode }) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[styles.lastMessage, { color: theme.textMuted }]}
+      numberOfLines={1}
+      ellipsizeMode="tail"
+    >
+      {children}
+    </Text>
+  );
+};
 
 // User count display for the chat
 export const UserCount = ({
@@ -92,13 +117,19 @@ export const UserCount = ({
   style: TextStyle;
 }) => <Text style={[styles.userCount, style]}>{text}</Text>;
 
-export const Viewider = () => <View style={styles.viewider} />;
+export const Viewider = () => {
+  const theme = useTheme();
+  return (
+    <View
+      style={[styles.viewider, { backgroundColor: theme.surfaceHighlight }]}
+    />
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
     padding: 16,
     paddingTop: 0,
-    backgroundColor: '#fff',
     overflow: 'hidden',
   },
   burgerMenu: {
@@ -110,10 +141,8 @@ const styles = StyleSheet.create({
     transform: [{ translateX: -300 }],
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: '#fff',
     padding: 16,
     borderRightWidth: 1,
-    borderRightColor: '#f0f0f0',
   },
   containerOpen: {
     transform: [{ translateX: 0 }],
@@ -129,7 +158,6 @@ const styles = StyleSheet.create({
   },
   burgerButtonText: {
     fontSize: 24,
-    color: '#333',
   },
   chatItem: {
     borderRadius: 16,
@@ -162,15 +190,12 @@ const styles = StyleSheet.create({
   chatName: {
     fontWeight: 'bold',
   },
-  lastMessage: {
-    color: '#999',
-  },
+  lastMessage: {},
   userCount: {
     marginLeft: 'auto',
   },
   viewider: {
     height: 1,
     width: '100%',
-    backgroundColor: '#0052cd0d',
   },
 });

package/src/components/styled/SendInput.tsx

@@ -14,6 +14,7 @@ import AttachSheet, { PickedMedia } from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getElementFont } from '../../helpers/getElementFont';
+import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
 import { getMediaLibrary } from '../../helpers/mediaLibraryRuntime';
 import * as ImagePicker from 'expo-image-picker';
@@ -99,6 +100,7 @@ const SendInput: React.FC<SendInputProps> = ({
   isMessageProcessing,
 }) => {
   const t = useT();
+  const theme = useTheme();
   const [message, setMessage] = useState('');
   const [isRecording, setIsRecording] = useState(false);
   // Live counter (seconds) for the recording overlay. Updated by a
@@ -630,7 +632,8 @@ const SendInput: React.FC<SendInputProps> = ({
                 fontSize={config?.typography?.input?.fontSize}
                 fontWeight={config?.typography?.input?.fontWeight as any}
                 placeholder={t('input.placeholder')}
-                placeholderTextColor="#999"
+                placeholderTextColor={theme.textMuted}
+                keyboardAppearance={theme.dark ? 'dark' : 'light'}
                 value={message}
                 onChangeText={(text) => {
                   messageRef.current = text;
@@ -678,11 +681,21 @@ const SendInput: React.FC<SendInputProps> = ({
                   borderRadius: 20,
                   alignItems: 'center',
                   justifyContent: 'center',
-                  backgroundColor: '#FEE2E2',
+                  // Light keeps its pale-red chip; on a dark ground the
+                  // danger tint on the glyph alone carries the meaning.
+                  backgroundColor: theme.dark ? theme.surfaceSecondary : '#FEE2E2',
                 }}
                 activeOpacity={0.7}
               >
-                <Text style={{ color: '#B91C1C', fontWeight: '700', fontSize: 18 }}>×</Text>
+                <Text
+                  style={{
+                    color: theme.dark ? theme.danger : '#B91C1C',
+                    fontWeight: '700',
+                    fontSize: 18,
+                  }}
+                >
+                  ×
+                </Text>
               </TouchableOpacity>
               {/* Live elapsed time + red recording dot. flex:1 so it
                 * occupies the middle slot the input used to have. */}
@@ -701,14 +714,14 @@ const SendInput: React.FC<SendInputProps> = ({
                     width: 10,
                     height: 10,
                     borderRadius: 5,
-                    backgroundColor: '#EF4444',
+                    backgroundColor: theme.dark ? theme.danger : '#EF4444',
                   }}
                 />
-                <Text style={{ fontSize: 16, color: '#1F2937', fontWeight: '500' }}>
+                <Text style={{ fontSize: 16, color: theme.text, fontWeight: '500' }}>
                   {Math.floor(recordingDuration / 60)}:
                   {(recordingDuration % 60).toString().padStart(2, '0')}
                 </Text>
-                <Text style={{ fontSize: 13, color: '#6B7280' }}>Recording…</Text>
+                <Text style={{ fontSize: 13, color: theme.textSecondary }}>Recording…</Text>
               </View>
             </>
           )}
@@ -742,9 +755,11 @@ const SendInput: React.FC<SendInputProps> = ({
                 disabled={disabled}
                 EndIcon={
                   showMic ? (
-                    <RecordIcon color="#FFFFFF" />
+                    <RecordIcon color={theme.textOnPrimary} />
                   ) : (
-                    <SendIcon color={filled ? '#FFFFFF' : '#D4D4D8'} />
+                    <SendIcon
+                      color={filled ? theme.textOnPrimary : theme.textMuted}
+                    />
                   )
                 }
                 style={{