@ethora/chat-component-rn 26.8.2 → 26.8.3

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>

package/src/helpers/parseMessageBody.tsx

@@ -10,9 +10,29 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
+import type { ChatThemeColors } from '../theme/theme';
 
 let elementKeyCounter = 0;
 
+/**
+ * Colours the parser needs. Helpers can't call hooks, so the caller passes
+ * the resolved theme (Message.tsx does); with nothing passed the historical
+ * hard-coded values apply, so the output is unchanged for other callers.
+ */
+export type MessageBodyTheme = Pick<
+  ChatThemeColors,
+  'primary' | 'text' | 'surface' | 'surfaceSecondary' | 'surfaceHighlight' | 'border'
+>;
+
+const DEFAULT_BODY_COLORS: MessageBodyTheme = {
+  primary: '#0a66c2',
+  text: '#24292f',
+  surface: '#fff',
+  surfaceSecondary: '#f6f8fa',
+  surfaceHighlight: '#e8f3ff',
+  border: '#e1e4e8',
+};
+
 export const decodeHTMLEntities = (text: string) => {
   const entities: Record<string, string> = {
     '&amp;': '&',
@@ -29,14 +49,19 @@ export const decodeHTMLEntities = (text: string) => {
   return text.replace(/&[a-zA-Z0-9#]+;/g, (m) => entities[m] || m);
 };
 
-const styles = {
+// Only the colour-bearing entries read from `c`; the rest is static layout.
+// Historical light values that were slightly off-token (#f1f3f4 inline code
+// ground, #333 inline code ink, #d0d7de / #e7e9ec / #eef0f2 table hairlines)
+// are kept when no theme is passed and collapse onto the theme tokens
+// otherwise.
+const buildStyles = (c: MessageBodyTheme, themed: boolean) => ({
   bold: { fontWeight: 'bold' as const },
   italic: { fontStyle: 'italic' as const },
   strike: { textDecorationLine: 'line-through' as const },
-  link: { color: '#0a66c2', textDecorationLine: 'underline' as const },
+  link: { color: c.primary, textDecorationLine: 'underline' as const },
 
   codeInlineBox: {
-    backgroundColor: '#f1f3f4',
+    backgroundColor: themed ? c.surfaceSecondary : '#f1f3f4',
     borderRadius: 3,
     paddingVertical: 1,
     paddingHorizontal: 4,
@@ -44,43 +69,43 @@ const styles = {
   codeInlineText: {
     fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace' }),
     fontSize: 13,
-    color: '#333',
+    color: themed ? c.text : '#333',
   },
 
   codeBlock: {
-    backgroundColor: '#f6f8fa',
+    backgroundColor: c.surfaceSecondary,
     padding: 12,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: '#e1e4e8',
+    borderColor: c.border,
     marginVertical: 8,
   } as const,
   codeBlockText: {
     fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace' }),
     fontSize: 14,
-    color: '#24292f',
+    color: c.text,
     lineHeight: 20,
   },
 
   h: [
-    { fontWeight: 'bold' as const, fontSize: 32, marginTop: 24, marginBottom: 16 },
-    { fontWeight: 'bold' as const, fontSize: 24, marginTop: 20, marginBottom: 14 },
-    { fontWeight: 'bold' as const, fontSize: 20, marginTop: 16, marginBottom: 12 },
-    { fontWeight: 'bold' as const, fontSize: 18, marginTop: 14, marginBottom: 10 },
-    { fontWeight: 'bold' as const, fontSize: 16, marginTop: 12, marginBottom: 8 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 32, marginTop: 24, marginBottom: 16 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 24, marginTop: 20, marginBottom: 14 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 20, marginTop: 16, marginBottom: 12 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 18, marginTop: 14, marginBottom: 10 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 16, marginTop: 12, marginBottom: 8 },
     { fontWeight: 'bold' as const, fontSize: 14, marginTop: 12, marginBottom: 8 },
   ],
 
   quote: {
     borderLeftWidth: 3,
-    borderLeftColor: '#ccc',
+    borderLeftColor: themed ? c.border : '#ccc',
     paddingLeft: 10,
     marginVertical: 4,
   },
 
   paragraph: { marginVertical: 6 },
 
-  hr: { height: 1, backgroundColor: '#e1e4e8', marginVertical: 20 },
+  hr: { height: 1, backgroundColor: c.border, marginVertical: 20 },
 
   listItemRow: { flexDirection: 'row' as const, alignItems: 'flex-start' as const },
   listMarker: { minWidth: 22, paddingTop: 2 },
@@ -93,41 +118,67 @@ const styles = {
     marginTop: 2,
     borderRadius: 3,
     borderWidth: 1,
-    borderColor: '#bbb',
-    backgroundColor: '#fff',
+    borderColor: themed ? c.border : '#bbb',
+    backgroundColor: c.surface,
     alignItems: 'center' as const,
     justifyContent: 'center' as const,
   },
-  checkboxTick: { fontSize: 12, color: '#0a66c2' },
+  checkboxBoxChecked: {
+    backgroundColor: c.surfaceHighlight,
+    borderColor: c.primary,
+  },
+  checkboxTick: { fontSize: 12, color: c.primary },
 
   tableContainer: { marginVertical: 12 } as StyleProp<ViewStyle>,
   tableInner: {
     borderWidth: 1,
-    borderColor: '#d0d7de',
+    borderColor: themed ? c.border : '#d0d7de',
     borderRadius: 6,
     overflow: 'hidden' as const,
-    backgroundColor: '#fff',
+    backgroundColor: c.surface,
   },
   tableRow: { flexDirection: 'row' as const },
   th: {
     flex: 1,
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: '#f6f8fa',
+    backgroundColor: c.surfaceSecondary,
     borderRightWidth: 1,
-    borderRightColor: '#d0d7de',
+    borderRightColor: themed ? c.border : '#d0d7de',
   },
   td: {
     flex: 1,
     paddingVertical: 10,
     paddingHorizontal: 12,
     borderTopWidth: 1,
-    borderTopColor: '#e7e9ec',
+    borderTopColor: themed ? c.border : '#e7e9ec',
     borderRightWidth: 1,
-    borderRightColor: '#eef0f2',
+    borderRightColor: themed ? c.border : '#eef0f2',
   },
   lastCell: { borderRightWidth: 0 },
-  cellText: { color: '#24292f', fontSize: 14, lineHeight: 20 } as const,
+  cellText: { color: c.text, fontSize: 14, lineHeight: 20 } as const,
+});
+
+const DEFAULT_STYLES = buildStyles(DEFAULT_BODY_COLORS, false);
+
+// Module-level like `elementKeyCounter`: parseMessageBody is synchronous,
+// so setting this at entry is safe, and it keeps the render helpers below
+// signature-free. The theme object from useTheme is memoized, so the
+// one-entry cache means styles are rebuilt only when the palette changes,
+// not per message.
+let styles = DEFAULT_STYLES;
+let cachedTheme: MessageBodyTheme | undefined;
+let cachedStyles = DEFAULT_STYLES;
+
+const resolveStyles = (theme?: MessageBodyTheme) => {
+  if (!theme) {
+    return DEFAULT_STYLES;
+  }
+  if (theme !== cachedTheme) {
+    cachedTheme = theme;
+    cachedStyles = buildStyles(theme, true);
+  }
+  return cachedStyles;
 };
 
 const renderTextWithLinks = (text: string) => {
@@ -300,7 +351,8 @@ const renderMarkdownTableRN = (
 // on the leaf <Text>s here rather than on the bubble wrapper.
 export const parseMessageBody = (
   text: string,
-  baseStyle?: TextStyle
+  baseStyle?: TextStyle,
+  theme?: MessageBodyTheme
 ): JSX.Element => {
   if (typeof text !== 'string') {
     return <View />;
@@ -309,6 +361,7 @@ export const parseMessageBody = (
   const lines = text.split('\n');
   const elements: JSX.Element[] = [];
   elementKeyCounter = 0;
+  styles = resolveStyles(theme);
 
   let listBuffer: Array<{
     type: 'ul' | 'checkbox';
@@ -345,7 +398,7 @@ export const parseMessageBody = (
           if (item.type === 'checkbox') {
             contentEl = (
               <View key={`checkbox-${elementKeyCounter++}`} style={styles.checkboxRow}>
-                <View style={[styles.checkboxBox, item.checked && { backgroundColor: '#e8f3ff', borderColor: '#0a66c2' }]}>
+                <View style={[styles.checkboxBox, item.checked && styles.checkboxBoxChecked]}>
                   {item.checked ? <Text style={styles.checkboxTick}>✓</Text> : null}
                 </View>
                 <Text style={[{ flex: 1 }, baseStyle]}>{parseInline(item.content)}</Text>

package/src/hooks/useCustomTypingIndicator.tsx

@@ -6,6 +6,7 @@ import {
   generateProcessingText,
 } from '../components/styled/StyledInputComponents/CustomTypingIndicator';
 import { RootState } from '../roomStore';
+import { useTheme } from './useTheme';
 
 /**
  * Hook for managing custom typing indicator functionality
@@ -13,6 +14,7 @@ import { RootState } from '../roomStore';
  */
 export const useCustomTypingIndicator = (roomJID: string) => {
   const { config } = useChatSettingState();
+  const theme = useTheme();
   const { rooms } = useSelector((state: RootState) => ({
     rooms: state.rooms.rooms,
   }));
@@ -68,7 +70,8 @@ export const useCustomTypingIndicator = (roomJID: string) => {
             top: '8px',
             left: '16px',
             right: '16px',
-            background: 'rgba(255, 255, 255, 0.95)',
+            background: theme.surface,
+            color: theme.text,
             padding: '8px 12px',
             borderRadius: '8px',
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
@@ -93,7 +96,8 @@ export const useCustomTypingIndicator = (roomJID: string) => {
             position: 'fixed',
             bottom: '80px',
             right: '20px',
-            background: 'rgba(255, 255, 255, 0.95)',
+            background: theme.surface,
+            color: theme.text,
             padding: '12px 16px',
             borderRadius: '20px',
             boxShadow: '0 4px 16px rgba(0, 0, 0, 0.15)',
@@ -108,7 +112,7 @@ export const useCustomTypingIndicator = (roomJID: string) => {
           };
       }
     },
-    [typingConfig?.styles]
+    [typingConfig?.styles, theme]
   );
 
   return {

package/src/hooks/useLogout.tsx

@@ -7,6 +7,7 @@ import { setLogoutState } from '../roomStore/roomsSlice';
 import { useCallback } from 'react';
 import { clearHeap } from '../roomStore/roomHeapSlice';
 import { pushSubscriptionService } from '../services/pushSubscriptionService';
+import { releasePushRegistration } from '../services/pushRegistration';
 import { clearRoomsRestCache } from '../networking/api-requests/rooms.api';
 import { clearPersistedState } from '../roomStore/persistence';
 import { secureUserStorage } from '../helpers/secureUserStorage';
@@ -93,9 +94,15 @@ const logoutService = {
       /* non-fatal */
     }
 
-    // 2. Push: clear locally-subscribed-rooms cache. Doesn't talk to the
-    //    server — that's the host app's responsibility (it owns the FCM/
-    //    APNs token lifecycle).
+    // 2. Push. Release the device-token registration on the backend
+    //    while the access token is still valid (the token itself is kept
+    //    so the next login re-registers it), then clear the local MucSub
+    //    room cache.
+    try {
+      await releasePushRegistration();
+    } catch (e) {
+      console.warn('logoutService: push release failed', e);
+    }
     try {
       await pushSubscriptionService.reset();
     } catch (e) {

package/src/hooks/useTheme.ts

@@ -0,0 +1,41 @@
+/** @format */
+
+import { useContext, useMemo, useSyncExternalStore } from 'react';
+import { ReactReduxContext } from 'react-redux';
+import { ThemeContext } from 'styled-components/native';
+import type { RootState } from '../roomStore';
+import { resolveTheme, type ChatTheme } from '../theme/theme';
+
+const noSubscribe = () => () => {};
+
+/**
+ * Effective palette for the current config (light or dark).
+ *
+ * Source order:
+ *   1. the styled-components ThemeProvider mounted by ReduxWrapper (same
+ *      object every styled template sees);
+ *   2. otherwise `config` from the redux store, when a Provider is present
+ *      (components rendered under a bare <Provider> in tests / hosts);
+ *   3. otherwise the light defaults.
+ * Never throws outside a provider, so leaf components stay renderable in
+ * isolation.
+ */
+export const useTheme = (): ChatTheme => {
+  const styledTheme = useContext(ThemeContext) as ChatTheme | undefined;
+  const reduxCtx = useContext(ReactReduxContext);
+  const store = reduxCtx?.store;
+
+  const config = useSyncExternalStore(
+    store ? store.subscribe : noSubscribe,
+    () =>
+      store
+        ? (store.getState() as RootState).chatSettingStore.config
+        : undefined,
+    () => undefined
+  );
+
+  return useMemo(
+    () => (styledTheme && 'statusBarStyle' in styledTheme ? styledTheme : resolveTheme(config)),
+    [styledTheme, config]
+  );
+};