@ethora/chat-component-rn 26.8.3 → 26.8.4

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -1,11 +1,18 @@
-import React, {useMemo} from 'react';
-import {Provider, useDispatch} from 'react-redux';
+import React, {useEffect, useMemo, useRef} from 'react';
+import {useColorScheme} from 'react-native';
+import {Provider, useDispatch, useSelector} from 'react-redux';
 import {KeyboardProvider} from 'react-native-keyboard-controller';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {ThemeProvider} from 'styled-components/native';
-import {resolveTheme} from '../../theme/theme';
+import {applyThemePreference, resolveTheme} from '../../theme/theme';
 import {store} from '../../roomStore';
-import {setConfig} from '../../roomStore/chatSettingsSlice';
+import type {RootState} from '../../roomStore';
+import {
+  setConfig,
+  setPushEnabled,
+  setThemePreference,
+} from '../../roomStore/chatSettingsSlice';
+import {loadPreferences} from '../../helpers/preferencesStorage';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
 import {XmppProvider} from '../../context/xmppProvider';
 import {MessageNotificationProvider} from '../../context/MessageNotificationContext';
@@ -53,6 +60,42 @@ const ConfigEnabler: React.FC<{config?: IConfig}> = ({config}) => {
   return null;
 };
 
+const ChatThemeProvider: React.FC<{config?: IConfig; children: React.ReactNode}> = ({
+  config,
+  children,
+}) => {
+  const dispatch = useDispatch();
+  const storeConfig = useSelector((s: RootState) => s.chatSettingStore.config);
+  const preference = useSelector(
+    (s: RootState) => s.chatSettingStore.themePreference,
+  );
+  const systemDark = useColorScheme() === 'dark';
+  const effective = applyThemePreference(storeConfig ?? config, preference);
+  const theme = useMemo(
+    () => resolveTheme(effective, systemDark),
+    [effective, systemDark],
+  );
+
+  const hydrated = useRef(false);
+  useEffect(() => {
+    if (hydrated.current) {return;}
+    hydrated.current = true;
+    loadPreferences().then((prefs) => {
+      if (prefs.theme) {dispatch(setThemePreference(prefs.theme));}
+      if (typeof prefs.pushEnabled === 'boolean') {
+        dispatch(setPushEnabled(prefs.pushEnabled));
+      }
+    });
+  }, [dispatch]);
+
+  const onThemeChange = config?.eventHandlers?.onThemeChange;
+  useEffect(() => {
+    if (preference && onThemeChange) {onThemeChange(preference, theme.dark);}
+  }, [preference, theme.dark, onThemeChange]);
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
 export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
   ({...props}) => {
     const memoizedConfig = useMemo(() => {
@@ -70,13 +113,11 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
     // KeyboardAvoidingView under the same flag).
     const ownKeyboardHandling = !memoizedConfig?.disableKeyboardAvoidingView;
 
-    // Light/dark palette (config.dark + config.darkColors). Styled
-    // components read it via `({ theme }) => theme.surface`; plain RN
-    // styles via the `useTheme()` hook.
-    const theme = useMemo(() => resolveTheme(memoizedConfig), [memoizedConfig]);
-
+    // Light/dark palette (config.dark + config.darkColors + the Settings
+    // choice). Styled components read it via `({ theme }) => theme.surface`;
+    // plain RN styles via the `useTheme()` hook.
     const tree = (
-      <ThemeProvider theme={theme}>
+      <ChatThemeProvider config={memoizedConfig}>
         <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
           <ToastProvider>
             <MessageNotificationProvider config={memoizedConfig}>
@@ -84,7 +125,7 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
             </MessageNotificationProvider>
           </ToastProvider>
         </XmppProvider>
-      </ThemeProvider>
+      </ChatThemeProvider>
     );
 
     return (

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

@@ -1,23 +1,37 @@
 /** @format */
 
 import React, { useCallback, useMemo } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useDispatch } from 'react-redux';
+import {
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
 import { ModalContainerFullScreen } from '../styledModalComponents';
 import ModalHeaderComponent from '../ModalHeaderComponent';
 import { ArowDownIcon } from '../../../assets/icons';
-import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import {
+  setActiveModal,
+  setPushEnabled,
+  setThemePreference,
+} from '../../../roomStore/chatSettingsSlice';
+import type { RootState } from '../../../roomStore';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
+import { savePreferences } from '../../../helpers/preferencesStorage';
 import { useT } from '../../../i18n/useT';
 import { useTheme } from '../../../hooks/useTheme';
-import type { ChatTheme } from '../../../theme/theme';
+import type { ChatTheme, ThemePreference } from '../../../theme/theme';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
 }
 
+const APPEARANCES: ThemePreference[] = ['light', 'dark', 'system'];
+
 const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   handleCloseModal,
 }) => {
@@ -27,6 +41,28 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   const theme = useTheme();
   const styles = useMemo(() => createStyles(theme), [theme]);
 
+  const themePreference = useSelector(
+    (s: RootState) => s.chatSettingStore.themePreference
+  );
+  const pushEnabled = useSelector(
+    (s: RootState) => s.chatSettingStore.pushEnabled
+  );
+
+  // What the picker shows before the user ever touched it: the host's
+  // config.dark, so the selected segment matches what is on screen.
+  const appearance: ThemePreference =
+    themePreference ??
+    (config?.dark === 'system' ? 'system' : config?.dark ? 'dark' : 'light');
+
+  const appearanceLabels: Record<ThemePreference, string> = useMemo(
+    () => ({
+      light: t('settings.appearance.light'),
+      dark: t('settings.appearance.dark'),
+      system: t('settings.appearance.system'),
+    }),
+    [t]
+  );
+
   const options = useMemo(
     () => [
       { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
@@ -42,6 +78,31 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
     [dispatch]
   );
 
+  const handleAppearance = useCallback(
+    (pref: ThemePreference) => {
+      dispatch(setThemePreference(pref));
+      savePreferences({ theme: pref });
+    },
+    [dispatch]
+  );
+
+  // The SDK acts on the flag itself (pushRegistration releases / restores
+  // the device-token registrations); the host is told so it can mirror
+  // the choice on any native push side it owns.
+  const onPushNotificationsToggle = config?.eventHandlers?.onPushNotificationsToggle;
+  const handlePush = useCallback(
+    (enabled: boolean) => {
+      dispatch(setPushEnabled(enabled));
+      savePreferences({ pushEnabled: enabled });
+      if (onPushNotificationsToggle) {
+        Promise.resolve(onPushNotificationsToggle(enabled)).catch((err) =>
+          console.warn('[settings] onPushNotificationsToggle failed', err)
+        );
+      }
+    },
+    [dispatch, onPushNotificationsToggle]
+  );
+
   return (
     <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
@@ -53,6 +114,51 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
         * hairline dividers — the rows are separate destinations, and the
         * design gives each its own surface. */}
       <View style={styles.body}>
+        {!config?.settings?.hideAppearance ? (
+          <View style={[styles.card, styles.stackCard]} testID="settings-appearance">
+            <Text style={styles.label}>{t('settings.appearance.title')}</Text>
+            <View style={styles.segmented} accessibilityRole="radiogroup">
+              {APPEARANCES.map((pref) => {
+                const selected = pref === appearance;
+                return (
+                  <TouchableOpacity
+                    key={pref}
+                    testID={`settings-appearance-${pref}`}
+                    accessibilityRole="radio"
+                    accessibilityState={{ selected }}
+                    activeOpacity={0.7}
+                    style={[styles.segment, selected && styles.segmentSelected]}
+                    onPress={() => handleAppearance(pref)}
+                  >
+                    <Text
+                      style={[styles.segmentLabel, selected && styles.segmentLabelSelected]}
+                    >
+                      {appearanceLabels[pref]}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+        ) : null}
+
+        {!config?.settings?.hidePushToggle ? (
+          <View style={styles.card} testID="settings-notifications">
+            <View style={styles.switchText}>
+              <Text style={styles.label}>{t('settings.notifications.push')}</Text>
+              <Text style={styles.hint}>{t('settings.notifications.pushHint')}</Text>
+            </View>
+            <Switch
+              testID="settings-push-switch"
+              value={pushEnabled !== false}
+              onValueChange={handlePush}
+              trackColor={{ true: theme.primary, false: theme.surfaceSecondary }}
+              thumbColor={theme.surface}
+              ios_backgroundColor={theme.surfaceSecondary}
+            />
+          </View>
+        ) : null}
+
         {options.map((option) => (
           <TouchableOpacity
             key={option.key}
@@ -98,11 +204,58 @@ const createStyles = (theme: ChatTheme) => StyleSheet.create({
     shadowRadius: 12,
     elevation: 3,
   },
+  // Label above the control instead of beside it: three segments do not
+  // fit next to a label on narrow phones.
+  stackCard: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: 14,
+  },
   label: {
     fontSize: 17,
     fontWeight: '500',
     color: theme.text,
   },
+  hint: {
+    marginTop: 4,
+    fontSize: 13,
+    lineHeight: 18,
+    color: theme.textSecondary,
+  },
+  switchText: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  segmented: {
+    flexDirection: 'row',
+    backgroundColor: theme.surfaceSecondary,
+    borderRadius: 12,
+    padding: 3,
+    gap: 3,
+  },
+  segment: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 9,
+    borderRadius: 9,
+  },
+  segmentSelected: {
+    backgroundColor: theme.surface,
+    shadowColor: theme.shadow,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  segmentLabel: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: theme.textSecondary,
+  },
+  segmentLabelSelected: {
+    color: theme.text,
+  },
   chevron: {
     transform: [{ rotate: '-90deg' }],
   },

package/src/helpers/preferencesStorage.ts

@@ -0,0 +1,40 @@
+/** @format */
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type { ThemePreference } from '../theme/theme';
+
+const KEY = '@ethora/preferences';
+
+/** Small, unencrypted, per-device user preferences set from Settings. */
+export interface StoredPreferences {
+  theme?: ThemePreference;
+  pushEnabled?: boolean;
+}
+
+export const loadPreferences = async (): Promise<StoredPreferences> => {
+  try {
+    const raw = await AsyncStorage.getItem(KEY);
+    return raw ? (JSON.parse(raw) as StoredPreferences) : {};
+  } catch {
+    return {};
+  }
+};
+
+export const savePreferences = async (
+  patch: StoredPreferences
+): Promise<void> => {
+  try {
+    const current = await loadPreferences();
+    await AsyncStorage.setItem(KEY, JSON.stringify({ ...current, ...patch }));
+  } catch (error) {
+    console.warn('[preferences] save failed', error);
+  }
+};
+
+export const clearPreferences = async (): Promise<void> => {
+  try {
+    await AsyncStorage.removeItem(KEY);
+  } catch {
+    /* ignore */
+  }
+};

package/src/i18n/strings.ts

@@ -239,6 +239,13 @@ const en: UiStringTable = {
   'settings.blockedUsers.label': 'Blocked Users',
   'settings.blockedUsers.description': 'Users you have blocked cannot send you messages or see when you are online.',
   'settings.blockedUsers.emptyState': "You haven't blocked anyone yet.",
+  'settings.appearance.title': 'Appearance',
+  'settings.appearance.light': 'Light',
+  'settings.appearance.dark': 'Dark',
+  'settings.appearance.system': 'System',
+  'settings.notifications.title': 'Notifications',
+  'settings.notifications.push': 'Push notifications',
+  'settings.notifications.pushHint': 'New messages and calls wake this device even when the app is closed.',
   'settings.visibility.title': 'Visibility',
   'settings.visibility.profileLabel': 'Profile Visibility',
   'settings.visibility.open': 'Open (default)',
@@ -490,6 +497,13 @@ const fr: UiStringTable = {
   'settings.blockedUsers.label': 'Utilisateurs bloqués',
   'settings.blockedUsers.description': "Les utilisateurs que vous avez bloqués ne peuvent pas vous envoyer de messages ni voir quand vous êtes en ligne.",
   'settings.blockedUsers.emptyState': "Vous n'avez encore bloqué personne.",
+  'settings.appearance.title': 'Apparence',
+  'settings.appearance.light': 'Clair',
+  'settings.appearance.dark': 'Sombre',
+  'settings.appearance.system': 'Système',
+  'settings.notifications.title': 'Notifications',
+  'settings.notifications.push': 'Notifications push',
+  'settings.notifications.pushHint': 'Les nouveaux messages et appels réveillent cet appareil même quand l\'application est fermée.',
   'settings.visibility.title': 'Visibilité',
   'settings.visibility.profileLabel': 'Visibilité du profil',
   'settings.visibility.open': 'Ouvert (par défaut)',
@@ -741,6 +755,13 @@ const es: UiStringTable = {
   'settings.blockedUsers.label': 'Usuarios bloqueados',
   'settings.blockedUsers.description': 'Los usuarios que hayas bloqueado no podrán enviarte mensajes ni ver cuándo estás en línea.',
   'settings.blockedUsers.emptyState': 'Todavía no has bloqueado a nadie.',
+  'settings.appearance.title': 'Apariencia',
+  'settings.appearance.light': 'Claro',
+  'settings.appearance.dark': 'Oscuro',
+  'settings.appearance.system': 'Sistema',
+  'settings.notifications.title': 'Notificaciones',
+  'settings.notifications.push': 'Notificaciones push',
+  'settings.notifications.pushHint': 'Los mensajes y llamadas nuevos despiertan este dispositivo incluso con la aplicación cerrada.',
   'settings.visibility.title': 'Visibilidad',
   'settings.visibility.profileLabel': 'Visibilidad del perfil',
   'settings.visibility.open': 'Abierto (predeterminado)',
@@ -992,6 +1013,13 @@ const pt: UiStringTable = {
   'settings.blockedUsers.label': 'Utilizadores bloqueados',
   'settings.blockedUsers.description': 'Os utilizadores que bloqueou não lhe podem enviar mensagens nem ver quando está online.',
   'settings.blockedUsers.emptyState': 'Ainda não bloqueou ninguém.',
+  'settings.appearance.title': 'Aparência',
+  'settings.appearance.light': 'Claro',
+  'settings.appearance.dark': 'Escuro',
+  'settings.appearance.system': 'Sistema',
+  'settings.notifications.title': 'Notificações',
+  'settings.notifications.push': 'Notificações push',
+  'settings.notifications.pushHint': 'Novas mensagens e chamadas acordam este dispositivo mesmo com o aplicativo fechado.',
   'settings.visibility.title': 'Visibilidade',
   'settings.visibility.profileLabel': 'Visibilidade do perfil',
   'settings.visibility.open': 'Aberto (predefinição)',
@@ -1243,6 +1271,13 @@ const ht: UiStringTable = {
   'settings.blockedUsers.label': 'Itilizatè bloke',
   'settings.blockedUsers.description': 'Itilizatè ou bloke yo pa ka voye mesaj ba ou ni wè lè ou an liy.',
   'settings.blockedUsers.emptyState': 'Ou poko bloke pèsonn.',
+  'settings.appearance.title': 'Aparans',
+  'settings.appearance.light': 'Klè',
+  'settings.appearance.dark': 'Fonse',
+  'settings.appearance.system': 'Sistèm',
+  'settings.notifications.title': 'Notifikasyon',
+  'settings.notifications.push': 'Notifikasyon push',
+  'settings.notifications.pushHint': 'Nouvo mesaj ak apèl reveye aparèy sa a menm lè aplikasyon an fèmen.',
   'settings.visibility.title': 'Vizibilite',
   'settings.visibility.profileLabel': 'Vizibilite pwofil la',
   'settings.visibility.open': 'Louvri (default)',
@@ -1494,6 +1529,13 @@ const zh: UiStringTable = {
   'settings.blockedUsers.label': '已屏蔽用户',
   'settings.blockedUsers.description': '被您屏蔽的用户无法向您发送消息，也无法看到您何时在线。',
   'settings.blockedUsers.emptyState': '您还没有屏蔽任何人。',
+  'settings.appearance.title': '外观',
+  'settings.appearance.light': '浅色',
+  'settings.appearance.dark': '深色',
+  'settings.appearance.system': '跟随系统',
+  'settings.notifications.title': '通知',
+  'settings.notifications.push': '推送通知',
+  'settings.notifications.pushHint': '即使应用已关闭，新消息和来电也会唤醒此设备。',
   'settings.visibility.title': '可见性',
   'settings.visibility.profileLabel': '资料可见性',
   'settings.visibility.open': '公开（默认）',

package/src/main.ts

@@ -121,3 +121,5 @@ export {
   useTheme,
 } from './theme';
 export type { ChatTheme, ChatThemeColors, ChatThemeOverrides } from './theme';
+export type { ThemePreference } from './theme/theme';
+export { setThemePreference, setPushEnabled } from './roomStore/chatSettingsSlice';

package/src/roomStore/chatSettingsSlice.ts

@@ -12,6 +12,7 @@ import {
 import { Iso639_1Codes } from '../types/models/language.model';
 import type { TranslateMode } from '../utils/translateModePolicy';
 import { secureUserStorage } from '../helpers/secureUserStorage';
+import { applyThemePreference, type ThemePreference } from '../theme/theme';
 
 export interface ChatState {
   user: User;
@@ -29,6 +30,14 @@ export interface ChatState {
    * See utils/translateModePolicy.
    */
   translateMode?: TranslateMode;
+  /**
+   * Appearance picked in Settings (light / dark / system). Persisted per
+   * device; folded into `config.dark` by setConfig / setThemePreference so
+   * every consumer of `config` sees the effective value.
+   */
+  themePreference?: ThemePreference;
+  /** Push notifications toggle from Settings. `undefined` = on. */
+  pushEnabled?: boolean;
 }
 
 export const unpackAndTransform = (input?: User): User => {
@@ -126,11 +135,22 @@ const reducers = {
       };
     }
   },
+  setThemePreference: (
+    state: WritableDraft<ChatState>,
+    action: PayloadAction<ThemePreference | undefined>
+  ) => {
+    state.themePreference = action.payload;
+    state.config = applyThemePreference(state.config as IConfig | undefined, action.payload) as any;
+  },
+  setPushEnabled: (state: WritableDraft<ChatState>, action: PayloadAction<boolean>) => {
+    state.pushEnabled = action.payload;
+  },
   setConfig: (state: WritableDraft<ChatState>, action: PayloadAction<IConfig | undefined>) => {
     // Cast away immer's WritableDraft — IConfig contains callable
     // fields (eventHandlers, customComponent) that confuse the draft
-    // type inference but are inert at write-time.
-    state.config = action.payload as any;
+    // type inference but are inert at write-time. The user's in-app
+    // appearance choice survives a host re-dispatch.
+    state.config = applyThemePreference(action.payload, state.themePreference) as any;
   },
   setActiveModal: (state: WritableDraft<ChatState>, action: PayloadAction<ModalType | undefined>) => {
     state.activeModal = action.payload;
@@ -220,6 +240,8 @@ export const {
   setStoreClient,
   setLangSource,
   setTranslateMode,
+  setThemePreference,
+  setPushEnabled,
 } = chatSlice.actions;
 
 export default chatSlice.reducer;

package/src/services/pushRegistration.ts

@@ -70,7 +70,10 @@ const readSession = (): Session => {
     xmppUsername: String(user?.xmppUsername || ''),
     projectName: String(config?.projectName || '').trim(),
     gatewayUrl: String(config?.pushNotifications?.apiUrl || '').trim(),
-    pushDisabled: config?.pushNotifications?.enabled === false,
+    // Off by config (host) or by the user's Settings toggle.
+    pushDisabled:
+      config?.pushNotifications?.enabled === false ||
+      slice?.pushEnabled === false,
   };
 };
 
@@ -233,7 +236,17 @@ const ensureWatching = (): void => {
       hookIdentity = null;
       return;
     }
-    if (session.pushDisabled || !isReady(session)) {
+    if (session.pushDisabled) {
+      // Switched off (Settings toggle or config): take the device off the
+      // backend but keep the tokens, so switching back on re-registers
+      // without the host doing anything. `registered` empties at once,
+      // so later store updates do not repeat the release.
+      if (registered.size > 0) {
+        releasePushRegistration().catch(() => undefined);
+      }
+      return;
+    }
+    if (!isReady(session)) {
       return;
     }
     runTokenHook(session);

package/src/theme/theme.ts

@@ -1,5 +1,7 @@
 /** @format */
 
+import { Appearance } from 'react-native';
+
 /**
  * Chat theme.
  *
@@ -161,7 +163,10 @@ export const DARK_THEME: ChatThemeColors = {
 /** The subset of IConfig the theme depends on (kept structural so the
  * helpers can be called with partial configs in tests). */
 export interface ThemeConfigInput {
-  dark?: boolean;
+  /** `true` forces dark, `'system'` follows the OS appearance (pass the
+   * current scheme as `systemDark` to resolveTheme / isDarkTheme; omitted,
+   * the OS scheme is read directly). */
+  dark?: boolean | 'system';
   darkColors?: ChatThemeOverrides;
   colors?: {
     primary?: string;
@@ -179,8 +184,16 @@ export interface ThemeConfigInput {
   backgroundChat?: { color?: string };
 }
 
-export const isDarkTheme = (config?: ThemeConfigInput | null): boolean =>
-  !!config?.dark;
+/** The OS appearance right now — the fallback when a caller has no hook. */
+// Optional chaining on `Appearance` itself: tests that mock react-native
+// partially leave it undefined, and a missing module must read as light.
+const systemIsDark = (): boolean => Appearance?.getColorScheme?.() === 'dark';
+
+export const isDarkTheme = (
+  config?: ThemeConfigInput | null,
+  systemDark: boolean = systemIsDark()
+): boolean =>
+  config?.dark === 'system' ? systemDark : config?.dark === true;
 
 const pick = <T>(...values: (T | undefined | null | '')[]): T | undefined =>
   values.find((v) => v !== undefined && v !== null && v !== '') as
@@ -196,8 +209,11 @@ const stripUndefined = (o: ChatThemeOverrides): ChatThemeOverrides =>
  * Build the effective palette for a config. Pure; memoize at the call
  * site (useTheme does).
  */
-export const resolveTheme = (config?: ThemeConfigInput | null): ChatTheme => {
-  if (isDarkTheme(config)) {
+export const resolveTheme = (
+  config?: ThemeConfigInput | null,
+  systemDark?: boolean
+): ChatTheme => {
+  if (isDarkTheme(config, systemDark)) {
     const overrides = stripUndefined(config?.darkColors ?? {});
     const primary = pick(overrides.primary, DARK_THEME.primary)!;
     return {
@@ -241,3 +257,21 @@ export const resolveTheme = (config?: ThemeConfigInput | null): ChatTheme => {
     statusBarStyle: 'dark-content',
   };
 };
+
+/** In-app appearance choice from Settings; `undefined` = follow the host's config.dark. */
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+/**
+ * Fold the user's in-app appearance choice into a config: the choice wins
+ * over the host's `dark` (a host that wants to lock the theme hides the
+ * setting with `settings.hideAppearance`). Returns the same object when
+ * nothing changes, so memoised consumers do not re-render.
+ */
+export const applyThemePreference = <T extends { dark?: boolean | 'system' }>(
+  config: T | undefined,
+  preference?: ThemePreference
+): T | undefined => {
+  if (!preference || !config) {return config;}
+  const dark = preference === 'system' ? ('system' as const) : preference === 'dark';
+  return config.dark === dark ? config : { ...config, dark };
+};

package/src/types/types.ts

@@ -386,8 +386,10 @@ export interface IConfig {
    * not applied — pass brand colours via `darkColors` instead.
    *
    *   config: { dark: true, darkColors: { primary: '#7C3AED', surface: '#111' } }
+   *
+   * `'system'` follows the device appearance (light/dark) automatically.
    */
-  dark?: boolean;
+  dark?: boolean | 'system';
   /** Per-entry overrides of the dark palette; see ChatThemeColors. */
   darkColors?: ChatThemeOverrides;
   /** Configurable font family / weights for the chat UI. See TypographyConfig. */
@@ -787,8 +789,29 @@ export interface IConfig {
     firebaseConfig?: FBConfig;
   };
 
+  /** Settings screen switches. */
+  settings?: {
+    /** Hide the Light / Dark / System appearance picker (host locks the theme via `dark`). */
+    hideAppearance?: boolean;
+    /** Hide the push-notifications toggle. */
+    hidePushToggle?: boolean;
+  };
+
   // ----- event hooks -----
   eventHandlers?: {
+    /**
+     * Fired when the user picks an appearance in Settings (and once on
+     * mount with the persisted choice). `isDark` is the resolved value
+     * for 'system'. Hosts use it to sync their own chrome (status bar).
+     */
+    onThemeChange?: (preference: 'light' | 'dark' | 'system', isDark: boolean) => void;
+    /**
+     * Fired when the user toggles push notifications in Settings. The SDK
+     * itself stops delivering: off releases every device-token
+     * registration on the backend (tokens are kept), on registers them
+     * again. A host that also owns native push should mirror the choice.
+     */
+    onPushNotificationsToggle?: (enabled: boolean) => void | Promise<void>;
     onMessageSent?: (event: {
       message: string;
       roomJID: string;

package/src/version.ts

@@ -1,3 +1,3 @@
 // Generated by scripts/sync-version.mjs on `npm version`.
 // Edit package.json's version instead of this file.
-export const ETHORA_CHAT_COMPONENT_VERSION = '26.8.2';
+export const ETHORA_CHAT_COMPONENT_VERSION = '26.8.4';