@oxyhq/services 6.9.33 → 6.9.34

package/src/ui/components/fileManagement/UploadPreview.tsx

@@ -2,9 +2,9 @@ import type React from 'react';
 import { View, Text, TouchableOpacity, Modal, ScrollView } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
-import type { ThemeStyles } from '../../hooks/useThemeStyles';
 
 interface PendingFile {
     file: File | Blob;
@@ -20,8 +20,9 @@ interface UploadPreviewProps {
     onConfirm: () => void;
     onCancel: () => void;
     onRemoveFile: (index: number) => void;
-    themeStyles: ThemeStyles;
     inline?: boolean; // New prop to support inline rendering without Modal
+    /** @deprecated No longer used. Colors are sourced from useTheme() internally. */
+    themeStyles?: unknown;
 }
 
 const UploadPreviewContent: React.FC<{
@@ -29,26 +30,23 @@ const UploadPreviewContent: React.FC<{
     onConfirm: () => void;
     onCancel: () => void;
     onRemoveFile: (index: number) => void;
-    themeStyles: ThemeStyles;
 }> = ({
     pendingFiles,
     onConfirm,
     onCancel,
     onRemoveFile,
-    themeStyles,
 }) => {
-    const backgroundColor = themeStyles.backgroundColor;
-    const borderColor = themeStyles.borderColor;
+    const { colors, isDark } = useTheme();
     const totalSize = pendingFiles.reduce((sum, f) => sum + f.size, 0);
 
     return (
-        <View style={[fileManagementStyles.uploadPreviewContainer, { backgroundColor }]}>
-            <View style={[fileManagementStyles.uploadPreviewHeader, { borderBottomColor: borderColor }]}>
-                <Text style={[fileManagementStyles.uploadPreviewTitle, { color: themeStyles.textColor }]}>
+        <View className="bg-background" style={fileManagementStyles.uploadPreviewContainer}>
+            <View className="border-b border-border" style={fileManagementStyles.uploadPreviewHeader}>
+                <Text className="text-foreground" style={fileManagementStyles.uploadPreviewTitle}>
                     Review Files ({pendingFiles.length})
                 </Text>
                 <TouchableOpacity onPress={onCancel}>
-                    <Ionicons name="close" size={24} color={themeStyles.textColor} />
+                    <Ionicons name="close" size={24} color={colors.text} />
                 </TouchableOpacity>
             </View>
 
@@ -58,10 +56,8 @@ const UploadPreviewContent: React.FC<{
                     return (
                         <View
                             key={index}
-                            style={[
-                                fileManagementStyles.uploadPreviewItem,
-                                { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }
-                            ]}
+                            className="bg-secondary border-border"
+                            style={fileManagementStyles.uploadPreviewItem}
                         >
                             {isImage && pendingFile.preview ? (
                                 <ExpoImage
@@ -70,19 +66,19 @@ const UploadPreviewContent: React.FC<{
                                     contentFit="cover"
                                 />
                             ) : (
-                                <View style={[fileManagementStyles.uploadPreviewIconContainer, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}>
+                                <View style={[fileManagementStyles.uploadPreviewIconContainer, { backgroundColor: isDark ? '#333333' : '#F0F0F0' }]}>
                                     <Ionicons
                                         name={getFileIcon(pendingFile.type) as React.ComponentProps<typeof Ionicons>['name']}
                                         size={32}
-                                        color={themeStyles.primaryColor}
+                                        color={colors.primary}
                                     />
                                 </View>
                             )}
                             <View style={fileManagementStyles.uploadPreviewInfo}>
-                                <Text style={[fileManagementStyles.uploadPreviewName, { color: themeStyles.textColor }]} numberOfLines={1}>
+                                <Text className="text-foreground" style={fileManagementStyles.uploadPreviewName} numberOfLines={1}>
                                     {pendingFile.name}
                                 </Text>
-                                <Text style={[fileManagementStyles.uploadPreviewMeta, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text className="text-muted-foreground" style={fileManagementStyles.uploadPreviewMeta}>
                                     {formatFileSize(pendingFile.size)} • {pendingFile.type}
                                 </Text>
                             </View>
@@ -90,36 +86,38 @@ const UploadPreviewContent: React.FC<{
                                 style={fileManagementStyles.uploadPreviewRemove}
                                 onPress={() => onRemoveFile(index)}
                             >
-                                <Ionicons name="close-circle" size={24} color={themeStyles.dangerColor} />
+                                <Ionicons name="close-circle" size={24} color={colors.error} />
                             </TouchableOpacity>
                         </View>
                     );
                 })}
             </ScrollView>
 
-            <View style={[fileManagementStyles.uploadPreviewFooter, { borderTopColor: borderColor }]}>
+            <View className="border-t border-border" style={fileManagementStyles.uploadPreviewFooter}>
                 <View style={fileManagementStyles.uploadPreviewStats}>
-                    <Text style={[fileManagementStyles.uploadPreviewStatsText, { color: themeStyles.textColor }]}>
+                    <Text className="text-foreground" style={fileManagementStyles.uploadPreviewStatsText}>
                         {pendingFiles.length} file{pendingFiles.length !== 1 ? 's' : ''}
                     </Text>
-                    <Text style={[fileManagementStyles.uploadPreviewStatsText, { color: themeStyles.textColor }]}>
+                    <Text className="text-foreground" style={fileManagementStyles.uploadPreviewStatsText}>
                         {formatFileSize(totalSize)}
                     </Text>
                 </View>
                 <View style={fileManagementStyles.uploadPreviewActions}>
                     <TouchableOpacity
+                        className="border-border"
                         style={[
                             fileManagementStyles.uploadPreviewCancelButton,
-                            { borderColor, backgroundColor: 'transparent' }
+                            { backgroundColor: 'transparent' }
                         ]}
                         onPress={onCancel}
                     >
-                        <Text style={[fileManagementStyles.uploadPreviewCancelText, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.uploadPreviewCancelText}>
                             Cancel
                         </Text>
                     </TouchableOpacity>
                     <TouchableOpacity
-                        style={[fileManagementStyles.uploadPreviewConfirmButton, { backgroundColor: themeStyles.primaryColor }]}
+                        className="bg-primary"
+                        style={fileManagementStyles.uploadPreviewConfirmButton}
                         onPress={onConfirm}
                     >
                         <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
@@ -137,7 +135,6 @@ export const UploadPreview: React.FC<UploadPreviewProps> = ({
     onConfirm,
     onCancel,
     onRemoveFile,
-    themeStyles,
     inline = false,
 }) => {
     // If inline mode, render content directly without Modal
@@ -149,7 +146,6 @@ export const UploadPreview: React.FC<UploadPreviewProps> = ({
                 onConfirm={onConfirm}
                 onCancel={onCancel}
                 onRemoveFile={onRemoveFile}
-                themeStyles={themeStyles}
             />
         );
     }
@@ -167,7 +163,6 @@ export const UploadPreview: React.FC<UploadPreviewProps> = ({
                 onConfirm={onConfirm}
                 onCancel={onCancel}
                 onRemoveFile={onRemoveFile}
-                themeStyles={themeStyles}
             />
         </Modal>
     );

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -78,33 +78,34 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                     activeOpacity={1}
                     onPress={handleClose}
                 />
-                <View style={[styles.modal, { backgroundColor: theme.colors.background }]}>
+                <View className="bg-background" style={styles.modal}>
                     <View style={styles.header}>
                         <OxyIcon name="alert" size={32} color={theme.colors.error} />
-                        <Text style={[styles.title, { color: theme.colors.error }]}>
+                        <Text className="text-destructive" style={styles.title}>
                             {t('deleteAccount.title') || 'Delete Account'}
                         </Text>
                     </View>
 
-                    <Text style={[styles.warning, { color: theme.colors.text }]}>
+                    <Text className="text-foreground" style={styles.warning}>
                         {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
                     </Text>
 
                     {error && (
                         <View style={[styles.errorContainer, { backgroundColor: `${theme.colors.error}20` }]}>
-                            <Text style={[styles.errorText, { color: theme.colors.error }]}>
+                            <Text className="text-destructive" style={styles.errorText}>
                                 {error}
                             </Text>
                         </View>
                     )}
 
                     <View style={styles.inputGroup}>
-                        <Text style={[styles.label, { color: theme.colors.textSecondary }]}>
+                        <Text className="text-muted-foreground" style={styles.label}>
                             {t('deleteAccount.passwordLabel') || 'Enter your password'}
                         </Text>
-                        <View style={[styles.inputContainer, { borderColor: theme.colors.border, backgroundColor: theme.colors.background }]}>
+                        <View className="border-border bg-background" style={styles.inputContainer}>
                             <TextInput
-                                style={[styles.input, { color: theme.colors.text }]}
+                                className="text-foreground"
+                                style={styles.input}
                                 value={password}
                                 onChangeText={setPassword}
                                 placeholder={t('deleteAccount.passwordPlaceholder') || 'Password'}
@@ -127,17 +128,16 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                     </View>
 
                     <View style={styles.inputGroup}>
-                        <Text style={[styles.label, { color: theme.colors.textSecondary }]}>
+                        <Text className="text-muted-foreground" style={styles.label}>
                             {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
                         </Text>
                         <TextInput
+                            className="text-foreground bg-background"
                             style={[
                                 styles.input,
                                 styles.confirmInput,
                                 {
                                     borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
-                                    backgroundColor: theme.colors.background,
-                                    color: theme.colors.text,
                                 },
                             ]}
                             value={confirmUsername}
@@ -152,11 +152,12 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
 
                     <View style={styles.buttons}>
                         <TouchableOpacity
-                            style={[styles.button, styles.cancelButton, { borderColor: theme.colors.border }]}
+                            className="border-border"
+                            style={[styles.button, styles.cancelButton]}
                             onPress={handleClose}
                             disabled={isDeleting}
                         >
-                            <Text style={[styles.buttonText, { color: theme.colors.text }]}>
+                            <Text className="text-foreground" style={styles.buttonText}>
                                 {t('common.cancel') || 'Cancel'}
                             </Text>
                         </TouchableOpacity>

package/src/ui/components/theming.tsx

@@ -1,4 +1,5 @@
-import { useThemeColors, getTheme } from '../styles';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { getTheme } from '../styles';
 import type { InternalTheme } from './types';
 
 /**
@@ -15,7 +16,19 @@ export const useInternalTheme = (
     theme = 'dark';
   }
 
-  const colors = useThemeColors(theme);
+  const bloomTheme = useTheme();
+  const colors = {
+    text: bloomTheme.colors.text,
+    background: bloomTheme.colors.background,
+    inputBackground: bloomTheme.colors.backgroundSecondary,
+    placeholder: bloomTheme.colors.textTertiary,
+    primary: bloomTheme.colors.primary,
+    border: bloomTheme.colors.border,
+    error: bloomTheme.colors.error,
+    success: bloomTheme.colors.success,
+    warning: bloomTheme.colors.warning,
+    secondaryText: bloomTheme.colors.textSecondary,
+  };
   const themeObj = getTheme(theme);
 
   // Create InternalTheme compatible object

package/src/ui/screens/AccountCenterScreen.tsx

@@ -18,7 +18,7 @@ import Section from '../components/Section';
 import QuickActions from '../components/QuickActions';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
-import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
@@ -34,14 +34,11 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     // Use useOxy() hook for OxyContext values
     const { user, logout, isLoading, sessions, isAuthenticated } = useOxy();
     const { t } = useI18n();
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
     const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
-    // AccountCenterScreen uses a slightly different light background
-    const backgroundColor = themeStyles.isDarkTheme ? themeStyles.backgroundColor : '#f2f2f2';
-    // Extract commonly used colors for readability - ensure colors is always defined
-    const { textColor, primaryColor, dangerColor, colors: themeColors } = themeStyles;
-    const colors = themeColors || Colors[normalizeColorScheme(colorScheme, normalizedTheme)];
+    const dangerColor = bloomTheme.colors.error;
+    const colors = Colors[normalizeColorScheme(colorScheme, normalizedTheme)];
 
     // Memoized logout handler - prevents unnecessary re-renders
     const handleLogout = useCallback(async () => {
@@ -68,22 +65,22 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
 
     if (!isAuthenticated) {
         return (
-            <View style={[styles.container, { backgroundColor }]}>
-                <Text style={[styles.message, { color: textColor }]}>{t('common.status.notSignedIn') || 'Not signed in'}</Text>
+            <View style={styles.container} className="bg-background">
+                <Text style={styles.message} className="text-foreground">{t('common.status.notSignedIn') || 'Not signed in'}</Text>
             </View>
         );
     }
 
     if (isLoading) {
         return (
-            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
-                <ActivityIndicator size="large" color={primaryColor} />
+            <View style={[styles.container, { justifyContent: 'center' }]} className="bg-background">
+                <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
             </View>
         );
     }
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             {/* Header with user profile */}
             {user && (
                 <ProfileCard
@@ -230,7 +227,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 </SettingsListGroup>
 
                 <View style={styles.versionContainer}>
-                    <Text style={[styles.versionText, { color: themeStyles.isDarkTheme ? '#666666' : '#999999' }]}>
+                    <Text style={styles.versionText} className="text-muted-foreground">
                         {t('accountCenter.version', { version: packageInfo.version }) || `Version ${packageInfo.version}`}
                     </Text>
                 </View>

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -23,10 +23,11 @@ import { Ionicons } from '@expo/vector-icons';
 import { Section, GroupedSection, GroupedItem } from '../components';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
-import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { getDisplayName, getShortDisplayName } from '../utils/userUtils';
 import { useColorScheme } from '../hooks/useColorScheme';
-import { normalizeTheme } from '../utils/themeUtils';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 import { useUsersBySessions } from '../hooks/queries/useAccountQueries';
 import {
@@ -91,17 +92,16 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     const hasPlayedRef = useRef(false);
     const insets = useSafeAreaInsets();
 
-    // Use centralized theme styles hook for consistency
+    // Use bloom theme for ActivityIndicator and other non-style color props
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
     const normalizedTheme = normalizeTheme(theme);
-    const baseThemeStyles = useThemeStyles(normalizedTheme, colorScheme);
-    const themeStyles = useMemo(() => ({
-        ...baseThemeStyles,
-        // AccountOverviewScreen uses a custom primary color (purple) instead of the default blue
+    // AccountOverviewScreen uses a custom primary color (purple) instead of the default blue
+    const themeColors = {
         primaryColor: '#d169e5',
-        // Keep custom icon color for this screen
-        iconColor: baseThemeStyles.isDarkTheme ? '#BBBBBB' : '#666666',
-    }), [baseThemeStyles]);
+    };
+    // Icon colors from the Colors constant
+    const baseThemeColors = Colors[normalizeColorScheme(colorScheme, normalizedTheme)];
 
     // Compute user data for display
     const displayName = useMemo(() => getDisplayName(user), [user]);
@@ -320,23 +320,23 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
     if (!isAuthenticated) {
         return (
-            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
-                <Text style={[styles.message, { color: themeStyles.textColor }]}>{t('common.status.notSignedIn')}</Text>
+            <View style={styles.container} className="bg-background">
+                <Text style={styles.message} className="text-foreground">{t('common.status.notSignedIn')}</Text>
             </View>
         );
     }
 
     if (isLoading) {
         return (
-            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor, justifyContent: 'center' }]}>
-                <ActivityIndicator size="large" color={themeStyles.primaryColor} />
+            <View style={[styles.container, { justifyContent: 'center' }]} className="bg-background">
+                <ActivityIndicator size="large" color={themeColors.primaryColor} />
             </View>
         );
     }
 
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <ScrollView
                 style={styles.content}
                 contentContainerStyle={styles.scrollContent}
@@ -370,10 +370,10 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 </TouchableOpacity>
                             </View>
                             <View style={styles.nameWrapper}>
-                                <Text style={[styles.welcomeText, { color: themeStyles.textColor }]}>
+                                <Text style={styles.welcomeText} className="text-foreground">
                                     {displayName}
                                 </Text>
-                                <Text style={[styles.welcomeSubtext, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text style={styles.welcomeSubtext} className="text-muted-foreground">
                                     Manage your Oxy account.
                                 </Text>
                             </View>
@@ -384,7 +384,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* User Profile Section */}
                 <SettingsListGroup title={t('accountOverview.sections.profile')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="account" color={baseThemeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="account" color={baseThemeColors.iconSecurity} />}
                         title={displayName}
                         description={user ? (user.email || user.username) : (t('common.status.loading') || 'Loading...')}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'profile' })}
@@ -394,32 +394,32 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Account Settings */}
                 <SettingsListGroup title={t('accountOverview.sections.accountSettings')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="account-circle" color={baseThemeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="account-circle" color={baseThemeColors.iconPersonalInfo} />}
                         title={t('accountOverview.items.editProfile.title')}
                         description={t('accountOverview.items.editProfile.subtitle')}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'profile' })}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="shield-check" color={baseThemeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="shield-check" color={baseThemeColors.iconSecurity} />}
                         title={t('accountOverview.items.security.title')}
                         description={t('accountOverview.items.security.subtitle')}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'password' })}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="bell" color={baseThemeStyles.colors.iconStorage} />}
+                        icon={<SettingsIcon name="bell" color={baseThemeColors.iconStorage} />}
                         title={t('accountOverview.items.notifications.title')}
                         description={t('accountOverview.items.notifications.subtitle')}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'notifications' })}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="star" color={baseThemeStyles.colors.iconPayments} />}
+                        icon={<SettingsIcon name="star" color={baseThemeColors.iconPayments} />}
                         title={t('accountOverview.items.premium.title')}
                         description={user?.isPremium ? t('accountOverview.items.premium.manage') : t('accountOverview.items.premium.upgrade')}
                         onPress={() => navigate?.('PremiumSubscription')}
                     />
                     {user?.isPremium ? (
                         <SettingsListItem
-                            icon={<SettingsIcon name="credit-card" color={baseThemeStyles.colors.iconPersonalInfo} />}
+                            icon={<SettingsIcon name="credit-card" color={baseThemeColors.iconPersonalInfo} />}
                             title={t('accountOverview.items.billing.title')}
                             description={t('accountOverview.items.billing.subtitle')}
                             onPress={() => toast.info(t('accountOverview.items.billing.coming'))}
@@ -436,12 +436,12 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     {
                                         id: 'loading-accounts',
                                         icon: 'sync',
-                                        iconColor: baseThemeStyles.colors.iconSecurity,
+                                        iconColor: baseThemeColors.iconSecurity,
                                         title: t('accountOverview.loadingAdditional.title') || 'Loading accounts...',
                                         subtitle: t('accountOverview.loadingAdditional.subtitle') || 'Please wait while we load your additional accounts',
                                         customContent: (
                                             <View style={styles.loadingContainer}>
-                                                <ActivityIndicator size="small" color={baseThemeStyles.colors.iconSecurity} />
+                                                <ActivityIndicator size="small" color={baseThemeColors.iconSecurity} />
                                                 <Text style={styles.loadingText}>{t('accountOverview.loadingAdditional.title') || 'Loading accounts...'}</Text>
                                             </View>
                                         ),
@@ -454,7 +454,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 items={additionalAccountsData.map((account, index) => ({
                                     id: `account-${account.id}`,
                                     icon: 'account',
-                                    iconColor: baseThemeStyles.colors.iconData,
+                                    iconColor: baseThemeColors.iconData,
                                     title: typeof account.name === 'object'
                                         ? account.name?.full || account.name?.first || account.username
                                         : account.name || account.username,
@@ -505,13 +505,13 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {showMoreAccounts && (
                     <SettingsListGroup title={t('accountOverview.sections.accountManagement') || 'Account Management'}>
                         <SettingsListItem
-                            icon={<SettingsIcon name="plus" color={baseThemeStyles.colors.iconSecurity} />}
+                            icon={<SettingsIcon name="plus" color={baseThemeColors.iconSecurity} />}
                             title={t('accountOverview.items.addAccount.title') || 'Add Another Account'}
                             description={t('accountOverview.items.addAccount.subtitle') || 'Sign in with a different account'}
                             onPress={handleAddAccount}
                         />
                         <SettingsListItem
-                            icon={<SettingsIcon name="logout" color={baseThemeStyles.colors.iconSharing} />}
+                            icon={<SettingsIcon name="logout" color={baseThemeColors.iconSharing} />}
                             title={t('accountOverview.items.signOutAll.title') || 'Sign out of all accounts'}
                             description={t('accountOverview.items.signOutAll.subtitle') || 'Remove all accounts from this device'}
                             onPress={handleSignOutAll}
@@ -522,7 +522,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Quick Actions */}
                 <SettingsListGroup title={t('accountOverview.sections.quickActions')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="account-group" color={baseThemeStyles.colors.iconData} />}
+                        icon={<SettingsIcon name="account-group" color={baseThemeColors.iconData} />}
                         title={showMoreAccounts
                             ? t('accountOverview.items.accountSwitcher.titleHide')
                             : t('accountOverview.items.accountSwitcher.titleShow')}
@@ -536,25 +536,25 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         onPress={() => setShowMoreAccounts(!showMoreAccounts)}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="clock" color={baseThemeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="clock" color={baseThemeColors.iconSecurity} />}
                         title={t('accountOverview.items.history.title') || 'History'}
                         description={t('accountOverview.items.history.subtitle') || 'View and manage your search history'}
                         onPress={() => navigate?.('HistoryView')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="bookmark" color={baseThemeStyles.colors.iconStorage} />}
+                        icon={<SettingsIcon name="bookmark" color={baseThemeColors.iconStorage} />}
                         title={t('accountOverview.items.saves.title') || 'Saves & Collections'}
                         description={t('accountOverview.items.saves.subtitle') || 'View your saved items and collections'}
                         onPress={() => navigate?.('SavesCollections')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="download" color={baseThemeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="download" color={baseThemeColors.iconPersonalInfo} />}
                         title={t('accountOverview.items.downloadData.title')}
                         description={t('accountOverview.items.downloadData.subtitle')}
                         onPress={handleDownloadData}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="delete" color={baseThemeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="delete" color={baseThemeColors.iconSharing} />}
                         title={t('accountOverview.items.deleteAccount.title')}
                         description={t('accountOverview.items.deleteAccount.subtitle')}
                         onPress={handleDeleteAccount}
@@ -564,13 +564,13 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Support & Settings */}
                 <SettingsListGroup title={t('accountOverview.sections.support')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="magnify" color={baseThemeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="magnify" color={baseThemeColors.iconSecurity} />}
                         title={t('accountOverview.items.searchSettings.title') || 'Search Settings'}
                         description={t('accountOverview.items.searchSettings.subtitle') || 'SafeSearch and personalization'}
                         onPress={() => navigate?.('SearchSettings')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="translate" color={baseThemeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="translate" color={baseThemeColors.iconPersonalInfo} />}
                         title={t('accountOverview.items.language.title') || 'Language'}
                         description={t('accountOverview.items.language.subtitle') || 'Choose your preferred language'}
                         onPress={() => navigate?.('LanguageSelector')}
@@ -582,25 +582,25 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         onPress={() => toast.info(t('accountOverview.items.preferences.coming'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="help-circle" color={baseThemeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="help-circle" color={baseThemeColors.iconSecurity} />}
                         title={t('accountOverview.items.help.title')}
                         description={t('accountOverview.items.help.subtitle')}
                         onPress={() => navigate?.('HelpSupport')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="shield-check" color={baseThemeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="shield-check" color={baseThemeColors.iconPersonalInfo} />}
                         title={t('accountOverview.items.privacyPolicy.title') || 'Privacy Policy'}
                         description={t('accountOverview.items.privacyPolicy.subtitle') || 'How we handle your data'}
                         onPress={() => navigate?.('LegalDocuments', { initialStep: 1 })}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="file-document" color={baseThemeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="file-document" color={baseThemeColors.iconSecurity} />}
                         title={t('accountOverview.items.termsOfService.title') || 'Terms of Service'}
                         description={t('accountOverview.items.termsOfService.subtitle') || 'Terms and conditions of use'}
                         onPress={() => navigate?.('LegalDocuments', { initialStep: 2 })}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="link" color={baseThemeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="link" color={baseThemeColors.iconPersonalInfo} />}
                         title={t('accountOverview.items.connectedApps.title')}
                         description={t('accountOverview.items.connectedApps.subtitle')}
                         onPress={() => toast.info(t('accountOverview.items.connectedApps.coming'))}