@ethora/chat-component-rn 26.8.2 → 26.8.3

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={{

package/src/components/styled/StyledComponents.ts

@@ -11,7 +11,7 @@ export const ChatContainer = styled.View`
   flex-direction: column;
   flex: 1;
   width: 100%;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
 `;
 
 export const ThreadContainer = styled.View`
@@ -19,20 +19,20 @@ export const ThreadContainer = styled.View`
   justify-content: space-between;
   flex: 1;
   width: 100%;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
 `;
 
 export const ChatContainerHeader = styled.View`
   flex-direction: row;
   padding: 12px 16px;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
   align-items: center;
   justify-content: space-between;
   /* Rounded bottom corners + a soft drop shadow instead of the hairline
    * rule, so the header reads as a card over the conversation. */
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
-  shadow-color: #101828;
+  shadow-color: ${({ theme }) => theme.shadow};
   shadow-offset: 0px 4px;
   shadow-opacity: 0.06;
   shadow-radius: 12px;
@@ -88,7 +88,7 @@ export const ChatContainerHeaderLabel = styled.Text<{
   fontSize?: number;
   fontWeight?: string;
 }>`
-  color: #141414;
+  color: ${({ theme }) => theme.text};
   font-weight: ${({ fontWeight }) => fontWeight ?? 600};
   font-size: ${({ fontSize }) => fontSize ?? 16}px;
   text-align: left;
@@ -102,14 +102,14 @@ export const NonRoomChat = styled.View`
   width: 100%;
   align-items: center;
   justify-content: center;
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.surface};
   flex-direction: column;
   gap: 16px;
 `;
 
 export const MessagesScroll = styled.ScrollView`
   flex: 1;
-  background-color: #f3f6fc;
+  background-color: ${({ theme }) => theme.chatBackground};
   padding: 0px 16px;
 `;
 
@@ -121,12 +121,19 @@ export const MessagesList = styled.View`
 
 export const MessageTimestamp = styled.Text`
   font-size: 12px;
-  color: #999;
+  color: ${({ theme }) => theme.textMuted};
   margin-bottom: 5px;
 `;
 
 export const Message = styled.View<{ isUser: boolean }>`
-  background-color: ${(props) => (props.isUser ? '#e8eafd' : '#f3f6fc')};
+  background-color: ${({ isUser, theme }) =>
+    theme.dark
+      ? isUser
+        ? theme.messageBackgroundUser
+        : theme.messageBackground
+      : isUser
+        ? '#e8eafd'
+        : '#f3f6fc'};
   padding: 10px;
   margin: 10px 0;
   border-radius: 8px;
@@ -137,17 +144,17 @@ export const Message = styled.View<{ isUser: boolean }>`
 
 export const MessageText = styled.Text`
   margin: 0;
-  color: #141414;
+  color: ${({ theme }) => theme.text};
 `;
 
 export const UserName = styled.Text`
   font-weight: bold;
-  color: #141414;
+  color: ${({ theme }) => theme.text};
 `;
 
 // Input Components
 export const InputContainer = styled.View`
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
   flex-direction: row;
   gap: 5px;
   padding: 8px;
@@ -158,9 +165,9 @@ export const InputContainer = styled.View`
 export const MessageInput = styled.TextInput`
   padding: 10px;
   border-radius: 8px;
-  border: 1px solid #e5e7eb;
-  background-color: #f5f7f9;
-  color: #141414;
+  border: 1px solid ${({ theme }) => theme.border};
+  background-color: ${({ theme }) => theme.surfaceSecondary};
+  color: ${({ theme }) => theme.text};
 `;
 
 export const IconButton = styled.TouchableOpacity`
@@ -171,14 +178,14 @@ export const IconButton = styled.TouchableOpacity`
 export const SendButton = styled.TouchableOpacity`
   padding: 10px 20px;
   border-radius: 8px;
-  background-color: #007bff;
+  background-color: ${({ theme }) => theme.primary};
   box-shadow: 1px -1px 10px rgba(0, 0, 0, 0.25);
   justify-content: center;
   align-items: center;
 `;
 
 export const SendButtonText = styled.Text`
-  color: white;
+  color: ${({ theme }) => theme.textOnPrimary};
 `;
 
 // Avatar and Utility Components
@@ -234,7 +241,7 @@ export const Overlay = styled.View`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: ${({ theme }) => theme.overlay};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -247,8 +254,8 @@ export const CustomMessageText = styled.Text<{
   colorUser: string;
 }>`
   margin: 0px;
-  color: ${({ color, isUser, colorUser }) =>
-    isUser ? colorUser || '#000' : color || '#000'};
+  color: ${({ color, isUser, colorUser, theme }) =>
+    isUser ? colorUser || theme.messageTextUser : color || theme.messageText};
 `;
 
 export const FileInput = styled.TextInput`
@@ -271,13 +278,13 @@ export const OrDelimiter = styled.Text`
 
 export const OrDelimiterText = styled.Text`
   font-size: 14px;
-  color: #999;
+  color: ${({ theme }) => theme.textMuted};
 `;
 
 export const Line = styled.View`
   width: 100%;
   height: 1px;
-  background-color: #0052cd0d;
+  background-color: ${({ theme }) => theme.surfaceHighlight};
 `;
 
 export const AlsoCheckbox = styled.View<{ accentColor: string }>`
@@ -291,7 +298,7 @@ export const AlsoContainer = styled.TouchableOpacity`
   align-items: center;
   flex-direction: row;
   gap: 8px;
-  background-color: #0052cd0d;
+  background-color: ${({ theme }) => theme.surfaceHighlight};
   font-size: 14px;
   padding: 10px 28px;
   text-align: start;

package/src/components/styled/StyledInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, TextInput, StyleSheet } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface StyledInputProps {
   label?: string;
@@ -13,9 +14,12 @@ const InputWrapper = ({ children }: { children: React.ReactNode }) => {
   return <View style={styles.inputWrapper}>{children}</View>;
 };
 
-const Label = ({ children }: { children: React.ReactNode }) => (
-  <Text style={styles.label}>{children}</Text>
-);
+const Label = ({ children }: { children: React.ReactNode }) => {
+  const theme = useTheme();
+  return (
+    <Text style={[styles.label, { color: theme.textSecondary }]}>{children}</Text>
+  );
+};
 
 const StyledInput = ({
   color,
@@ -23,18 +27,24 @@ const StyledInput = ({
   ...props
 }: { color?: string; error?: boolean } & React.ComponentProps<
   typeof TextInput
->) => (
-  <TextInput
-    style={[
-      styles.input,
-      {
-        borderColor: error ? 'red' : color || '#0052CD',
-        backgroundColor: '#F5F7F9',
-      },
-    ]}
-    {...props}
-  />
-);
+>) => {
+  const theme = useTheme();
+  return (
+    <TextInput
+      placeholderTextColor={theme.textMuted}
+      keyboardAppearance={theme.dark ? 'dark' : 'light'}
+      style={[
+        styles.input,
+        {
+          borderColor: error ? 'red' : color || theme.primary,
+          backgroundColor: theme.surfaceSecondary,
+          color: theme.text,
+        },
+      ]}
+      {...props}
+    />
+  );
+};
 
 const HelperText = ({
   children,
@@ -42,11 +52,16 @@ const HelperText = ({
 }: {
   children: React.ReactNode;
   error?: boolean;
-}) => (
-  <Text style={[styles.helperText, { color: error ? 'red' : '#8c8c8c' }]}>
-    {children}
-  </Text>
-);
+}) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[styles.helperText, { color: error ? 'red' : theme.textSecondary }]}
+    >
+      {children}
+    </Text>
+  );
+};
 
 const InputWithLabel: React.FC<StyledInputProps> = ({
   label,
@@ -77,7 +92,6 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 14,
-    color: '#8c8c8c',
     marginBottom: 4,
     marginLeft: 8,
   },

package/src/components/styled/StyledInputComponents/CustomTypingIndicator.tsx

@@ -54,7 +54,7 @@ const BaseWrapper = styled.View<{ $position: NonNullable<CustomTypingIndicatorPr
   /* основная типографика */
   /* (цвета текста задаём на текстовых нодах) */
 
-  ${({ $position }) => {
+  ${({ $position, theme }) => {
     switch ($position) {
       case 'top':
         return css`
@@ -62,11 +62,11 @@ const BaseWrapper = styled.View<{ $position: NonNullable<CustomTypingIndicatorPr
           top: 8px;
           left: 16px;
           right: 16px;
-          background-color: rgba(255, 255, 255, 0.95);
+          background-color: ${theme.surface};
           padding: 8px 12px;
           border-radius: 8px;
           /* тени (iOS/Android) */
-          shadow-color: #000;
+          shadow-color: ${theme.shadow};
           shadow-opacity: 0.1;
           shadow-radius: 8px;
           shadow-offset: 0px 2px;
@@ -79,7 +79,7 @@ const BaseWrapper = styled.View<{ $position: NonNullable<CustomTypingIndicatorPr
           top: 0; left: 0; right: 0; bottom: 0;
           align-items: center;
           justify-content: center;
-          background-color: rgba(0, 0, 0, 0.4); /* лёгкая вуаль */
+          background-color: ${theme.overlay}; /* лёгкая вуаль */
           padding: 16px 24px;
         `;
       case 'floating':
@@ -87,10 +87,10 @@ const BaseWrapper = styled.View<{ $position: NonNullable<CustomTypingIndicatorPr
           position: absolute;
           right: 20px;
           bottom: 80px;
-          background-color: rgba(255, 255, 255, 0.95);
+          background-color: ${theme.surface};
           padding: 12px 16px;
           border-radius: 20px;
-          shadow-color: #000;
+          shadow-color: ${theme.shadow};
           shadow-opacity: 0.15;
           shadow-radius: 12px;
           shadow-offset: 0px 4px;
@@ -110,7 +110,7 @@ const Label = styled.Text`
   margin-right: 8px;
   font-weight: 500;
   font-size: 14px;
-  color: #555;
+  color: ${({ theme }) => theme.textSecondary};
 `;
 
 const DotsRow = styled.View`
@@ -195,7 +195,7 @@ const DotView = styled(Animated.View)`
   width: 6px;
   height: 6px;
   border-radius: 3px;
-  background-color: #666;
+  background-color: ${({ theme }) => theme.textSecondary};
   margin-right: 2px;
 `;
 

package/src/components/styled/StyledInputComponents/MediaComponents.tsx

@@ -59,9 +59,19 @@ export const UnsupportedContainer = styled.TouchableOpacity<{ isUser?: boolean }
   margin: 8px;
   cursor: pointer;
   gap: 8px;
-  background-color: ${({ isUser }) => (isUser ? '#EDF5FF' : '#F7F9FC')};
+  /* Light keeps its own tints (not in the palette); dark sits the card on
+     the bubble colours so it reads on a dark ground. */
+  background-color: ${({ isUser, theme }) =>
+    theme.dark
+      ? isUser
+        ? theme.messageBackgroundUser
+        : theme.surfaceSecondary
+      : isUser
+        ? '#EDF5FF'
+        : '#F7F9FC'};
   border-width: 1px;
-  border-color: ${({ isUser }) => (isUser ? '#D7E6FF' : '#E7ECF3')};
+  border-color: ${({ isUser, theme }) =>
+    theme.dark ? theme.border : isUser ? '#D7E6FF' : '#E7ECF3'};
   min-width: 196px;
   max-width: 260px;
 `;
@@ -71,7 +81,8 @@ export const BackgroundFile = styled.View`
   height: 54px;
   align-items: center;
   justify-content: center;
-  background-color: #F3EAFB;
+  background-color: ${({ theme }) =>
+    theme.dark ? theme.surfaceHighlight : '#F3EAFB'};
   border-radius: 10px;
 `;
 
@@ -90,20 +101,22 @@ export const FileName = styled.Text<{
   font-size: 14px;
   font-weight: 600;
   flex-shrink: 1;
-  color: ${({ isUser, colorIsUser }) =>
-    isUser ? colorIsUser || '#1D4ED8' : '#1F2937'};
+  color: ${({ isUser, colorIsUser, theme }) =>
+    isUser
+      ? colorIsUser || (theme.dark ? theme.senderName : '#1D4ED8')
+      : theme.text};
 `;
 
 export const FileSizeContainer = styled.View`
   align-items: flex-start;
   flex-direction: row;
-  background-color: #FFFFFF;
+  background-color: ${({ theme }) => theme.surface};
   padding: 3px 8px;
   border-radius: 999px;
 `;
 
 export const FileSize = styled.Text`
-  color: #667085;
+  color: ${({ theme }) => (theme.dark ? theme.textSecondary : '#667085')};
   overflow: hidden;
   text-align: left;
   font-size: 12px;