@ethora/chat-component-rn 26.8.2 → 26.8.3

package/src/components/Modals/NewChatModal/NewChatModal.tsx

@@ -26,6 +26,8 @@ import { postRoom } from '../../../networking/api-requests/rooms.api';
 import { useAppDispatch, useAppSelector } from '../../../hooks/hooks';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { useToast } from '../../../context/ToastContext';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
 
 interface NewChatModalProps {
   handleCloseModal?: () => void;
@@ -46,6 +48,8 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
   const { client } = useXmppClient();
   const { user } = useChatSettingState();
   const { showToast } = useToast();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
 
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -314,7 +318,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
             {pickedUri ? (
               <Image source={{ uri: pickedUri }} style={styles.pictureImage} />
             ) : (
-              <CameraIcon color="#FFFFFF" width={26} height={26} />
+              <CameraIcon color={theme.textOnPrimary} width={26} height={26} />
             )}
           </TouchableOpacity>
 
@@ -324,7 +328,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
             value={roomName}
             onChangeText={handleRoomNameChange}
             placeholder={t('modal.newChat.roomNamePlaceholder')}
-            placeholderTextColor="#8C8C8C"
+            placeholderTextColor={theme.textMuted}
             returnKeyType="next"
           />
           {!!errors.name && roomName.length > 0 && (
@@ -339,7 +343,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
             value={roomDescription}
             onChangeText={handleRoomDescriptionChange}
             placeholder={t('modal.newChat.descriptionPlaceholder')}
-            placeholderTextColor="#8C8C8C"
+            placeholderTextColor={theme.textMuted}
             multiline
           />
 
@@ -363,7 +367,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
               onPress={handleCreateRoom}
             >
               {loading ? (
-                <ActivityIndicator color="#FFFFFF" />
+                <ActivityIndicator color={theme.textOnPrimary} />
               ) : (
                 <Text style={styles.submitLabel}>
                   {t('modal.newChat.createButton')}
@@ -377,12 +381,12 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
   backdrop: {
     flex: 1,
     // Opaque, per the design: the chat list behind stays hidden rather
     // than showing through a translucent dim.
-    backgroundColor: '#E9EDF2',
+    backgroundColor: theme.listBackground,
     alignItems: 'center',
     justifyContent: 'center',
     padding: 24,
@@ -391,9 +395,9 @@ const styles = StyleSheet.create({
     width: '100%',
     maxWidth: 380,
     borderRadius: 20,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.surface,
     padding: 20,
-    shadowColor: '#121219',
+    shadowColor: theme.shadow,
     shadowOffset: { width: 0, height: 8 },
     shadowOpacity: 0.08,
     shadowRadius: 24,
@@ -402,7 +406,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 17,
     fontWeight: '700',
-    color: '#141414',
+    color: theme.text,
     textAlign: 'center',
   },
   picture: {
@@ -421,11 +425,11 @@ const styles = StyleSheet.create({
   },
   input: {
     borderRadius: 12,
-    backgroundColor: '#F4F5F7',
+    backgroundColor: theme.surfaceSecondary,
     paddingHorizontal: 14,
     paddingVertical: 12,
     fontSize: 15,
-    color: '#141414',
+    color: theme.text,
     marginTop: 10,
   },
   textArea: {
@@ -433,7 +437,7 @@ const styles = StyleSheet.create({
     textAlignVertical: 'top',
   },
   error: {
-    color: '#E53935',
+    color: theme.danger,
     fontSize: 12,
     marginTop: 6,
     marginLeft: 4,
@@ -451,17 +455,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   cancel: {
-    backgroundColor: '#E7E8EA',
+    backgroundColor: theme.surfaceSecondary,
   },
   cancelLabel: {
     fontSize: 15,
     fontWeight: '500',
-    color: '#8C8C8C',
+    color: theme.textSecondary,
   },
   submitLabel: {
     fontSize: 15,
     fontWeight: '600',
-    color: '#FFFFFF',
+    color: theme.textOnPrimary,
   },
 });
 

package/src/components/Modals/ProfileHeader/ProfileMenu.tsx

@@ -13,6 +13,7 @@ import {
   View,
 } from 'react-native';
 import { MoreIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
 
 export interface ProfileMenuItem {
   key: string;
@@ -44,6 +45,7 @@ const ProfileMenu: React.FC<{
   items: ProfileMenuItem[];
   testIDPrefix?: string;
 }> = ({ items, testIDPrefix = 'chat-profile' }) => {
+  const theme = useTheme();
   const buttonRef = useRef<View>(null);
   const [open, setOpen] = useState(false);
   const [anchor, setAnchor] = useState({ top: DEFAULT_TOP, right: EDGE });
@@ -131,6 +133,8 @@ const ProfileMenu: React.FC<{
           style={[
             styles.card,
             {
+              backgroundColor: theme.surface,
+              shadowColor: theme.shadow,
               top: anchor.top,
               right: anchor.right,
               opacity: progress,
@@ -151,11 +155,19 @@ const ProfileMenu: React.FC<{
               key={item.key}
               testID={`${testIDPrefix}-menu-${item.key}`}
               activeOpacity={0.6}
-              style={[styles.row, index > 0 && styles.rowDivider]}
+              style={[
+                styles.row,
+                index > 0 && styles.rowDivider,
+                index > 0 && theme.dark && { borderTopColor: theme.divider },
+              ]}
               onPress={() => closeMenu(item.onPress)}
             >
               <Text
-                style={[styles.label, item.destructive && styles.destructive]}
+                style={[
+                  styles.label,
+                  { color: theme.text },
+                  item.destructive && { color: theme.danger },
+                ]}
               >
                 {item.label}
               </Text>
@@ -180,10 +192,8 @@ const styles = StyleSheet.create({
   card: {
     position: 'absolute',
     minWidth: 200,
-    backgroundColor: '#FFFFFF',
     borderRadius: 14,
     paddingVertical: 4,
-    shadowColor: '#121219',
     shadowOffset: { width: 0, height: 6 },
     shadowOpacity: 0.18,
     shadowRadius: 16,
@@ -199,14 +209,11 @@ const styles = StyleSheet.create({
   },
   rowDivider: {
     borderTopWidth: StyleSheet.hairlineWidth,
+    // Light hairline; swapped for theme.divider in dark mode.
     borderTopColor: '#EFEFF2',
   },
   label: {
     fontSize: 16,
-    color: '#141414',
-  },
-  destructive: {
-    color: '#E53935',
   },
   icon: {
     width: 22,

package/src/components/Modals/SelectUsersModal/SelectUsersModal.tsx

@@ -4,6 +4,7 @@ import { getActiveRoom, RootState } from '../../../roomStore';
 import {
   ActionButton,
   CloseButton,
+  CloseButtonText,
   GroupContainer,
   ModalBackground,
   ModalContainer,
@@ -15,7 +16,6 @@ import Loader from '../../styled/Loader';
 import { postAddRoomMember } from '../../../networking/api-requests/rooms.api';
 import { useToast } from '../../../context/ToastContext';
 import { updateRoom } from '../../../roomStore/roomsSlice';
-import { Text } from 'react-native';
 
 interface SelectUsersModalProps {
   /** Render the opener yourself (the chat profile uses an "Add Members"
@@ -92,8 +92,7 @@ const SelectUsersModal: React.FC<SelectUsersModalProps> = ({ trigger }) => {
         <ModalBackground>
           <ModalContainer>
             <CloseButton onPress={handleCloseModal}>
-              <Text style={{ fontSize: 24 }}>&times;</Text>
-              &times;
+              <CloseButtonText>&times;</CloseButtonText>
             </CloseButton>
             <GroupContainer
               style={{

package/src/components/Modals/SettingsModals/ManageDataModal/ManageDataModal.tsx

@@ -20,6 +20,7 @@ import {
   SharedSettingsStyledLabel,
 } from '../SharedStyledComponents';
 import { View } from 'react-native';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface ManageDataModalProps {
   handleCloseModal: any;
@@ -37,6 +38,7 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
   handleCloseModal,
 }) => {
   const { config } = useSelector((state: RootState) => state.chatSettingStore);
+  const theme = useTheme();
 
   const handleDownloadClick = async () => {
     // const exportedData = await getExportMyData();
@@ -76,10 +78,10 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
             </LabelData>
           </SharedSettingsSectionContainer>
           <SharedSettingsStyledButton
-            borderColor={config?.colors?.primary || '#0052CD'}
+            borderColor={theme.primary}
             onPress={handleDownloadClick}
             text="Download your data"
-            color={config?.colors?.primary || '#0052CD'}
+            color={theme.primary}
           />
         </SharedSettingsColumnContainer>
         <SharedSettingsColumnContainer>
@@ -93,10 +95,10 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
             </SharedSettingsLabelData>
           </SharedSettingsSectionContainer>
           <SharedSettingsInfoPanel
-            bgColor={config?.colors?.secondary || '#F3F6FC'}
+            bgColor={config?.colors?.secondary || theme.surfaceHighlight}
           >
             <View>
-              <InfoIcon color={config?.colors?.primary || '#0052CD'} />
+              <InfoIcon color={theme.primary} />
             </View>
             <SharedSettingsInfoText>
               Due to the immutable nature of distributed ledger technology,
@@ -108,9 +110,9 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
             </SharedSettingsInfoText>
           </SharedSettingsInfoPanel>
           <SharedSettingsStyledButton
-            borderColor="#E53935"
+            borderColor={theme.danger}
             text="Delete My Account"
-            color="#E53935"
+            color={theme.danger}
           />
         </SharedSettingsColumnContainer>
       </SharedSettingsCenterContainer>

package/src/components/Modals/SettingsModals/Referrals/Referrals.tsx

@@ -22,6 +22,7 @@ import { useSelector } from 'react-redux';
 import { RootState } from '../../../../roomStore';
 import { View, Text } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface ReferralsModalProps {
   handleCloseModal: any;
@@ -31,6 +32,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
   handleCloseModal,
 }) => {
   const { config } = useSelector((state: RootState) => state.chatSettingStore);
+  const theme = useTheme();
 
   return (
     <ModalContainerFullScreen>
@@ -45,7 +47,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
           <SendCoinIcon style={{ width: 24, height: 24 }} />
           <SharedSettingsStyledLabel>and receive 25</SharedSettingsStyledLabel>
           <SendCoinIcon style={{ width: 24, height: 24 }} />
-          <Text>.</Text>
+          <Text style={{ color: theme.text }}>.</Text>
           <SharedSettingsStyledLabel>
             Send friends invite with your personal invitation code.
           </SharedSettingsStyledLabel>
@@ -55,7 +57,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
             Your invitation code
           </SharedSettingsStyledLabel>
           <StyledInput
-            {...{ color: config?.colors?.primary || '' } as any}
+            {...{ color: config?.colors?.primary || theme.primary } as any}
             placeholder="Your invitation code"
             // label={'About'}
             // value={message}
@@ -71,7 +73,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
             Or enter your referral code to earn coins
           </SharedSettingsStyledLabel>
           <StyledInput
-            {...{ color: config?.colors?.primary || '' } as any}
+            {...{ color: config?.colors?.primary || theme.primary } as any}
             placeholder="Your referral code"
             // label={'About'}
             // value={message}

package/src/components/Modals/SettingsModals/SharedStyledComponents.ts

@@ -39,7 +39,7 @@ export const RowWrapper = styled.View`
 export const SharedSettingsLabelData = styled(Label)`
   font-size: 12px;
   text-align: start;
-  color: #8c8c8c;
+  color: ${({theme}) => theme.textSecondary};
 `;
 
 export const SharedSettingsStyledButton = styled(Button)<{
@@ -57,10 +57,10 @@ export const SharedSettingsStyledButton = styled(Button)<{
   border: 1px solid ${({borderColor}) => borderColor};
 `;
 
-export const SharedSettingsInfoPanel = styled.View<{bgColor: string | undefined}>`
+export const SharedSettingsInfoPanel = styled.View<{bgColor?: string}>`
   display: flex;
   align-items: flex-start;
-  background-color: ${({bgColor}) => bgColor};
+  background-color: ${({bgColor}) => bgColor || 'transparent'};
   padding: 16px;
   border-radius: 8px;
   gap: 8px;
@@ -68,7 +68,7 @@ export const SharedSettingsInfoPanel = styled.View<{bgColor: string | undefined}
 
 export const SharedSettingsInfoText = styled.Text`
   font-size: 12px;
-  color: #141414;
+  color: ${({theme}) => theme.text};
   display: flex;
   text-align: start;
 `;

package/src/components/Modals/SettingsModals/Visibility/RadioInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface RadioInputProps {
   option: { label: string; value?: boolean };
@@ -12,8 +13,10 @@ export const RadioInput: React.FC<RadioInputProps> = ({
   option,
   checked,
   onChange,
-  radioColor = '#0052CD',
+  radioColor,
 }) => {
+  const theme = useTheme();
+  const color = radioColor || theme.primary;
   return (
     <View style={styles.container}>
       <TouchableOpacity
@@ -25,12 +28,14 @@ export const RadioInput: React.FC<RadioInputProps> = ({
           style={[
             styles.radioCircle,
             {
-              borderColor: radioColor,
-              backgroundColor: checked ? radioColor : 'transparent',
+              borderColor: color,
+              backgroundColor: checked ? color : 'transparent',
             },
           ]}
         />
-        <Text style={styles.radioLabel}>{option.label}</Text>
+        <Text style={[styles.radioLabel, { color: theme.text }]}>
+          {option.label}
+        </Text>
       </TouchableOpacity>
     </View>
   );
@@ -54,6 +59,5 @@ const styles = StyleSheet.create({
   },
   radioLabel: {
     fontSize: 16,
-    color: '#333',
   },
 });

package/src/components/Modals/SettingsModals/Visibility/VisibilityModal.tsx

@@ -15,6 +15,7 @@ import {
   SharedSettingsStyledLabel,
 } from '../SharedStyledComponents';
 import { RadioInput } from './RadioInput';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface VisibilityModalProps {
   handleCloseModal: any;
@@ -24,9 +25,8 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
   handleCloseModal,
 }) => {
   const dispatch = useDispatch();
-  const { user, config } = useSelector(
-    (state: RootState) => state.chatSettingStore
-  );
+  const { user } = useSelector((state: RootState) => state.chatSettingStore);
+  const theme = useTheme();
 
   const doUpdateUser = (user: User) => dispatch(setUser(user));
   const [isProfileOpen, setIsProfileOpen] = useState(user?.isProfileOpen);
@@ -78,7 +78,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'Open (default)', value: isProfileOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isProfileOpen === true}
                 onChange={() => setIsProfileOpen(true)}
               />
@@ -91,7 +91,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'Restricted', value: isProfileOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isProfileOpen === false}
                 onChange={() => setIsProfileOpen(false)}
               />
@@ -110,7 +110,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'Full (default)', value: isAssetsOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isAssetsOpen === true}
                 onChange={() => setIsAssetsOpen(true)}
               />
@@ -121,7 +121,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'InViewidual', value: isAssetsOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isAssetsOpen === false}
                 onChange={() => setIsAssetsOpen(false)}
               />

package/src/components/Modals/UserProfileModal/EditUserModal.tsx

@@ -10,6 +10,7 @@ import { updateUser } from '../../../roomStore/chatSettingsSlice';
 import { View } from 'react-native';
 import { pickImageAsset, PickedImage } from '../../../helpers/pickImageAsset';
 import { AddPhotoIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
 // import { actionUpdateUser } from '../actions';
 
 interface EditUserModalProps {
@@ -24,6 +25,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
   config,
 }) => {
   const dispatch = useDispatch();
+  const theme = useTheme();
 
   const [firstName, setFirstName] = useState(modalUser?.firstName || '');
   const [lastName, setLastName] = useState(modalUser?.lastName || '');
@@ -92,7 +94,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
             onPress={onSave}
             variant="outlined"
             style={{ width: 128 }}
-            color="#0052CD"
+            color={theme.primary}
             text="Save"
           />
         }

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -29,6 +29,8 @@ import { useT } from '../../../i18n/useT';
 import { useFileToken } from '../../../hooks/useFileToken';
 import { appendFileToken } from '../../../helpers/secureFileUrl';
 import { getIconColor } from '../../../helpers/getIconColor';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
 import { chatTextStyle } from '../../../helpers/typography';
 import { getElementFont } from '../../../helpers/getElementFont';
 import { LANGUAGE_OPTIONS } from '../../../helpers/constants/LANGUAGE_OPTIONS';
@@ -107,6 +109,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   const { showToast } = useToast();
   const { config, user, selectedUser, langSource } = useChatSettingState();
   const fileToken = useFileToken();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
 
   const [isEditing, setIsEditing] = useState(false);
   const [files, setFiles] = useState<UserFile[]>([]);
@@ -349,12 +353,12 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
         ? heroActions.map((action) => ({
             key: action.key,
             label: action.label,
-            icon: action.icon('#141414'),
+            icon: action.icon(theme.text),
             destructive: action.key === 'logout',
             onPress: action.onPress,
           }))
         : [],
-    [isCollapsed, heroActions]
+    [isCollapsed, heroActions, theme.text]
   );
 
   if (isEditing) {
@@ -591,10 +595,10 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
   screen: {
     position: 'relative',
-    backgroundColor: '#F2F3F5',
+    backgroundColor: theme.listBackground,
   },
   scroll: {
     width: '100%',
@@ -608,21 +612,21 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   card: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.surface,
     borderRadius: 14,
     padding: 16,
-    shadowColor: '#000',
+    shadowColor: theme.shadow,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.05,
     shadowRadius: 4,
     elevation: 1,
   },
   cardLabel: {
-    color: '#8C8C8C',
+    color: theme.textSecondary,
     fontSize: 14,
   },
   cardValue: {
-    color: '#141414',
+    color: theme.text,
     fontSize: 16,
     marginTop: 4,
   },
@@ -644,7 +648,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 20,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#EFEFF2',
+    borderBottomColor: theme.border,
     marginBottom: 12,
   },
   tab: {
@@ -658,7 +662,7 @@ const styles = StyleSheet.create({
   tabLabel: {
     fontSize: 15,
     fontWeight: '500',
-    color: '#8C8C8C',
+    color: theme.textSecondary,
   },
   tabBadge: {
     minWidth: 20,
@@ -668,7 +672,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   tabBadgeText: {
-    color: '#FFFFFF',
+    color: theme.textOnPrimary,
     fontSize: 11,
     fontWeight: '600',
   },
@@ -680,7 +684,7 @@ const styles = StyleSheet.create({
   },
   languageLabel: {
     fontSize: 16,
-    color: '#141414',
+    color: theme.text,
   },
   check: {
     fontSize: 16,
@@ -696,7 +700,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     borderRadius: 10,
     overflow: 'hidden',
-    backgroundColor: '#EFEFF2',
+    backgroundColor: theme.surfaceSecondary,
   },
   mediaImage: {
     width: '100%',
@@ -713,11 +717,11 @@ const styles = StyleSheet.create({
   },
   documentName: {
     fontSize: 16,
-    color: '#141414',
+    color: theme.text,
   },
   documentDate: {
     fontSize: 13,
-    color: '#8C8C8C',
+    color: theme.textSecondary,
     marginTop: 2,
   },
 });

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -11,6 +11,8 @@ import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
 import { useT } from '../../../i18n/useT';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
@@ -22,6 +24,8 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   const t = useT();
   const dispatch = useDispatch();
   const { config } = useChatSettingState();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
 
   const options = useMemo(
     () => [
@@ -58,7 +62,12 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
             onPress={() => handleClick(option.key)}
           >
             <Text style={styles.label}>{option.label}</Text>
-            <ArowDownIcon color="#8C8C8C" width={20} height={20} style={styles.chevron} />
+            <ArowDownIcon
+              color={theme.textSecondary}
+              width={20}
+              height={20}
+              style={styles.chevron}
+            />
           </TouchableOpacity>
         ))}
       </View>
@@ -66,9 +75,9 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
   screen: {
-    backgroundColor: '#E8EDF2',
+    backgroundColor: theme.listBackground,
   },
   body: {
     width: '100%',
@@ -79,11 +88,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.surface,
     borderRadius: 20,
     paddingHorizontal: 20,
     paddingVertical: 22,
-    shadowColor: '#101828',
+    shadowColor: theme.shadow,
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.06,
     shadowRadius: 12,
@@ -92,7 +101,7 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 17,
     fontWeight: '500',
-    color: '#141414',
+    color: theme.text,
   },
   chevron: {
     transform: [{ rotate: '-90deg' }],