@ethora/chat-component-rn 26.8.2 → 26.8.4

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;

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

@@ -2,14 +2,9 @@
 
 import styled from 'styled-components/native';
 
-// Theme variables for reuse
-const colors = {
-  primary: '#141414',
-  secondary: '#f5f7f9',
-  border: '#ccc',
-  white: '#fff',
-  black: '#000',
-};
+// Colours come from the ThemeProvider mounted in ReduxWrapper
+// (`({ theme }) => theme.x`); the light palette holds the values that
+// used to be hard-coded here.
 
 export const InputContainer = styled.View<{ isText?: boolean }>`
   flex-direction: column;
@@ -58,12 +53,12 @@ export const MessageInput = styled.TextInput<{
   padding: 8px 14px;
   border-radius: 20px;
   border-width: 1px;
-  border-color: ${(props) =>
-    props.isFocused ? props.color || '#0052CD' : 'transparent'};
-  color: #141414;
+  border-color: ${({ isFocused, color, theme }) =>
+    isFocused ? color || theme.primary : 'transparent'};
+  color: ${({ theme }) => theme.text};
   font-size: ${({ fontSize }) => fontSize ?? 16}px;
   ${({ fontWeight }) => (fontWeight ? `font-weight: ${fontWeight};` : '')}
-  background-color: #f5f7f9;
+  background-color: ${({ theme }) => theme.surfaceSecondary};
   flex: 1;
   /* No explicit line-height: on iOS a line-height larger than the
      font's natural metrics drops the glyph to the bottom of the line
@@ -85,13 +80,13 @@ export const Timer = styled.Text`
 export const TimerText = styled.Text`
   font-size: 18px;
   font-weight: bold;
-  color: ${colors.black};
+  color: ${({ theme }) => theme.text};
 `;
 
 export const WaveformContainer = styled.View`
   width: 100%;
   height: 40px;
-  background-color: #f1f1f1;
+  background-color: ${({ theme }) => theme.surfaceSecondary};
 `;
 
 export const RecordContainer = styled.View`
@@ -114,9 +109,9 @@ export const FilePreview = styled.View`
   width: 100px;
   height: 100px;
   border-width: 1px;
-  border-color: ${colors.border};
+  border-color: ${({ theme }) => theme.border};
   border-radius: 8px;
-  background-color: #f9f9f9;
+  background-color: ${({ theme }) => theme.surfaceSecondary};
   overflow: hidden;
 `;
 
@@ -132,15 +127,16 @@ export const VideoPreview = styled.View`
 
 export const StyledInput = styled.TextInput`
   padding: 16px 12px;
-  background-color: ${colors.secondary};
+  background-color: ${({ theme }) => theme.surfaceSecondary};
+  color: ${({ theme }) => theme.text};
   font-size: 16px;
   border-radius: 16px;
 `;
 
 export const TextareaInput = styled.TextInput`
   padding: 16px 12px;
-  background-color: ${colors.secondary};
+  background-color: ${({ theme }) => theme.surfaceSecondary};
   font-size: 16px;
-  color: ${colors.black};
+  color: ${({ theme }) => theme.text};
   border-radius: 16px;
 `;

package/src/components/styled/TreadLabel.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components/native';
+import { useTheme } from '../../hooks/useTheme';
 import { Line } from './StyledComponents';
 
 interface DateLabelProps {
@@ -21,7 +22,7 @@ export const StyledDateLabel = styled.Text<{
   secondary?: string;
 }>`
   margin: 0;
-  color: ${(props) => props.primary || '#0052cd'};
+  color: ${(props) => props.primary || props.theme.dateLabel};
   border-radius: 118px;
   padding: 5px 8px;
   display: flex;
@@ -30,16 +31,21 @@ export const StyledDateLabel = styled.Text<{
   font-size: 12px;
   line-height: 14px;
   font-weight: 600;
-  background-color: ${(props) => props.secondary || '#e7edf9'};
+  background-color: ${(props) =>
+    props.theme.dark ? props.theme.surfaceSecondary : props.secondary || '#e7edf9'};
   height: 24px;
   white-space: nowrap;
 `;
 
 const TreadLabel: React.FC<DateLabelProps> = ({ reply, colors }) => {
+  const theme = useTheme();
   return (
     <Container>
       <Line />
-      <StyledDateLabel {...colors}>
+      <StyledDateLabel
+        primary={theme.dark ? undefined : colors?.primary}
+        secondary={colors?.secondary}
+      >
         {reply} {reply > 1 ? 'replies' : 'reply'}
       </StyledDateLabel>
       <Line />

package/src/context/MessageNotificationContext.tsx

@@ -25,6 +25,7 @@ import { messageNotificationManager } from '../utils/messageNotificationManager'
 import { setCurrentRoom } from '../roomStore/roomsSlice';
 import { IConfig, IMessage } from '../types/types';
 import { RootState } from '../roomStore';
+import { useTheme } from '../hooks/useTheme';
 
 interface ToastItem {
   id: string;
@@ -228,6 +229,7 @@ const ToastRow: React.FC<{
   onPress: () => void;
   onDismiss: () => void;
 }> = ({ item, onPress, onDismiss }) => {
+  const theme = useTheme();
   const fade = useRef(new Animated.Value(0)).current;
   useEffect(() => {
     Animated.timing(fade, {
@@ -238,17 +240,29 @@ const ToastRow: React.FC<{
   }, [fade]);
 
   return (
-    <Animated.View style={[styles.toast, { opacity: fade }]}>
+    <Animated.View
+      style={[
+        styles.toast,
+        { backgroundColor: theme.surface, shadowColor: theme.shadow },
+        { opacity: fade },
+      ]}
+    >
       <Pressable style={styles.toastBody} onPress={onPress}>
-        <Text style={styles.toastTitle} numberOfLines={1}>
+        <Text
+          style={[styles.toastTitle, { color: theme.text }]}
+          numberOfLines={1}
+        >
           {item.roomName}
         </Text>
-        <Text style={styles.toastSubtitle} numberOfLines={2}>
+        <Text
+          style={[styles.toastSubtitle, { color: theme.textSecondary }]}
+          numberOfLines={2}
+        >
           {item.senderName}: {item.message?.body || ''}
         </Text>
       </Pressable>
       <Pressable onPress={onDismiss} style={styles.dismiss}>
-        <Text style={styles.dismissText}>×</Text>
+        <Text style={[styles.dismissText, { color: theme.textMuted }]}>×</Text>
       </Pressable>
     </Animated.View>
   );

package/src/helpers/getChatBackground.ts

@@ -1,6 +1,7 @@
 /** @format */
 
 import type { IConfig } from '../types/types';
+import { resolveTheme } from '../theme/theme';
 
 /** Ground behind the conversation, and behind the rounded corners of the
  * header and the composer that sit over it. */
@@ -15,4 +16,5 @@ export const DEFAULT_CHAT_BACKGROUND = '#F3F6FC';
  * white parent, not the conversation.
  */
 export const getChatBackgroundColor = (config?: IConfig): string =>
-  config?.backgroundChat?.color || DEFAULT_CHAT_BACKGROUND;
+  // Theme-aware: dark mode ignores `backgroundChat.color` (see theme.ts).
+  resolveTheme(config).chatBackground;

package/src/helpers/getDateLabelColor.ts

@@ -1,3 +1,5 @@
-export const getDateLabelColor = (config?: {
-  colors?: { primary?: string; secondary?: string; dateLabel?: string };
-}) => config?.colors?.dateLabel || config?.colors?.primary || '#0052CD';
+import { resolveTheme, type ThemeConfigInput } from '../theme/theme';
+
+/** Day-separator pill colour; theme-aware (see getIconColor). */
+export const getDateLabelColor = (config?: ThemeConfigInput | null) =>
+  resolveTheme(config).dateLabel;

package/src/helpers/getIconColor.ts

@@ -1,3 +1,6 @@
-export const getIconColor = (config?: {
-  colors?: { primary?: string; secondary?: string; icon?: string };
-}) => config?.colors?.icon || config?.colors?.primary || '#0052CD';
+import { resolveTheme, type ThemeConfigInput } from '../theme/theme';
+
+/** Chrome icon tint (attach, mic/send, burger, back). Theme-aware: in dark
+ * mode it comes from `darkColors.icon` → `darkColors.primary` → default. */
+export const getIconColor = (config?: ThemeConfigInput | null) =>
+  resolveTheme(config).icon;

package/src/helpers/getSenderNameColor.ts

@@ -1,3 +1,5 @@
-export const getSenderNameColor = (config?: {
-  colors?: { primary?: string; secondary?: string; senderName?: string };
-}) => config?.colors?.senderName || config?.colors?.primary || '#0052CD';
+import { resolveTheme, type ThemeConfigInput } from '../theme/theme';
+
+/** Sender name colour above incoming bubbles; theme-aware (see getIconColor). */
+export const getSenderNameColor = (config?: ThemeConfigInput | null) =>
+  resolveTheme(config).senderName;

package/src/helpers/markdownParser.tsx

@@ -1,9 +1,33 @@
 import React from 'react';
 import { Text, View, Linking, StyleSheet, TouchableOpacity } from 'react-native';
+import type { ChatThemeColors } from '../theme/theme';
 
-export const MarkDown = (text: string): (string | JSX.Element)[] => {
+/**
+ * Optional palette for the colour-bearing nodes (links, code grounds, quote
+ * rule). Helpers can't use hooks; callers pass the resolved theme. Omitted →
+ * the historical hard-coded colours, so existing output is unchanged.
+ */
+export type MarkDownTheme = Pick<
+  ChatThemeColors,
+  'primary' | 'surfaceSecondary' | 'border'
+>;
+
+export const MarkDown = (
+  text: string,
+  theme?: MarkDownTheme
+): (string | JSX.Element)[] => {
   if (typeof text !== 'string') {return [text];}
 
+  // Colour overrides layered over the static StyleSheet below.
+  const themed = theme
+    ? {
+        link: { color: theme.primary },
+        codeInline: { backgroundColor: theme.surfaceSecondary },
+        codeBlock: { backgroundColor: theme.surfaceSecondary },
+        quote: { borderLeftColor: theme.border },
+      }
+    : undefined;
+
   let key = 0;
   const elements: (string | JSX.Element)[] = [];
   const lines = text.split('\n');
@@ -43,7 +67,7 @@ export const MarkDown = (text: string): (string | JSX.Element)[] => {
         output.push(
           <Text
             key={`code-${key++}`}
-            style={styles.codeInline}
+            style={[styles.codeInline, themed?.codeInline]}
           >
             {token.slice(1, -1).trim()}
           </Text>
@@ -53,7 +77,7 @@ export const MarkDown = (text: string): (string | JSX.Element)[] => {
           <Text key={`link-${key++}`}>
             <Text
               onPress={() => Linking.openURL(token)}
-              style={styles.link}
+              style={[styles.link, themed?.link]}
             >
               {token}
             </Text>
@@ -129,7 +153,7 @@ export const MarkDown = (text: string): (string | JSX.Element)[] => {
       elements.push(
         <View
           key={`pre-${key++}`}
-          style={styles.codeBlock}
+          style={[styles.codeBlock, themed?.codeBlock]}
         >
           <Text style={styles.codeBlockText}>
             {codeBuffer.join('\n')}
@@ -164,7 +188,7 @@ export const MarkDown = (text: string): (string | JSX.Element)[] => {
       elements.push(
         <View
           key={`quote-${key++}`}
-          style={styles.quote}
+          style={[styles.quote, themed?.quote]}
         >
           {parseInline(line.replace(/^>\s*/, '')).map((el, idx) => (
             <React.Fragment key={idx}>{el}</React.Fragment>