@oxyhq/services 6.9.33 → 6.9.34

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -16,7 +16,7 @@ import { confirmAction } from '../utils/confirmAction';
 import { useAuthStore } from '../stores/authStore';
 import { GroupedSection } from '../components';
 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 } from '../utils/themeUtils';
@@ -109,13 +109,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     }>>([]);
 
 
-    // Get theme colors using centralized hook
+    // Get theme colors
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
 
-    // Extract colors for convenience - ensure it's always defined
-    // useThemeStyles always returns colors, but add safety check for edge cases
-    const colors = themeStyles.colors || Colors[normalizeColorScheme(colorScheme, theme || 'light')];
+    // Extract colors for convenience
+    const colors = Colors[normalizeColorScheme(colorScheme, theme || 'light')];
 
 
     // Track initialization to prevent unnecessary resets
@@ -317,17 +316,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
 
     if (userLoading || !isAuthenticated) {
         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={bloomTheme.colors.primary} />
             </View>
         );
     }
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <ScrollView
                 ref={scrollViewRef}
                 style={styles.content}
@@ -336,10 +332,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
             >
                 {/* Title and Subtitle Header */}
                 <View style={[styles.headerContainer, styles.headerSection]}>
-                            <Text style={[styles.modernTitle, { color: themeStyles.textColor, marginBottom: 0, marginTop: 0 }]}>
+                            <Text style={[styles.modernTitle, { marginBottom: 0, marginTop: 0 }]} className="text-foreground">
                                 {t('accountOverview.items.editProfile.title') || t('editProfile.title') || 'Edit Profile'}
                             </Text>
-                            <Text style={[styles.modernSubtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>
+                            <Text style={[styles.modernSubtitle, { marginBottom: 0, marginTop: 0 }]} className="text-muted-foreground">
                                 {t('accountOverview.items.editProfile.subtitle') || t('editProfile.subtitle') || 'Manage your profile and preferences'}
                             </Text>
                         </View>
@@ -356,7 +352,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setProfilePictureSectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
+                            <Text style={styles.sectionTitle} className="text-muted-foreground">
                                 {t('editProfile.sections.profilePicture') || 'PROFILE PICTURE'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
@@ -430,7 +426,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setBasicInfoSectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
+                            <Text style={styles.sectionTitle} className="text-muted-foreground">
                                 {t('editProfile.sections.basicInfo') || 'BASIC INFORMATION'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
@@ -474,7 +470,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setAboutSectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
+                            <Text style={styles.sectionTitle} className="text-muted-foreground">
                                 {t('editProfile.sections.about') || 'ABOUT YOU'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
@@ -526,7 +522,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setQuickActionsSectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
+                            <Text style={styles.sectionTitle} className="text-muted-foreground">
                                 {t('editProfile.sections.quickActions') || 'QUICK ACTIONS'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
@@ -570,7 +566,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setSecuritySectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
+                            <Text style={styles.sectionTitle} className="text-muted-foreground">
                                 {t('editProfile.sections.security') || 'SECURITY'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -23,9 +23,6 @@ import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
 import { Header, GroupedSection, LoadingState } from '../components';
 import { useI18n } from '../hooks/useI18n';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 
 interface SessionWithUser extends ClientSession {
@@ -76,25 +73,6 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
     const screenWidth = Dimensions.get('window').width;
     const { t } = useI18n();
-    const colorScheme = useColorScheme();
-    const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
-
-    // Modern color scheme - memoized for performance
-    // Uses themeStyles for base colors, with some custom additions for this screen
-    const colors = useMemo(() => ({
-        background: themeStyles.backgroundColor,
-        surface: themeStyles.secondaryBackgroundColor,
-        card: themeStyles.isDarkTheme ? '#2C2C2E' : '#FFFFFF',
-        text: themeStyles.textColor,
-        secondaryText: themeStyles.isDarkTheme ? '#8E8E93' : '#6D6D70',
-        accent: themeStyles.primaryColor,
-        destructive: themeStyles.dangerColor,
-        success: themeStyles.successColor,
-        border: themeStyles.borderColor,
-        activeCard: themeStyles.isDarkTheme ? '#0A84FF20' : '#007AFF15',
-        shadow: themeStyles.isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)',
-    }), [themeStyles]);
 
     // Refresh sessions when screen loads
     useEffect(() => {
@@ -309,7 +287,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     );
 
     return (
-        <View style={[styles.container, { backgroundColor: '#f2f2f2' }]}>
+        <View style={styles.container} className="bg-background">
             {/* Header */}
             <Header
                 title={t('accountSwitcher.title') || 'Account Switcher'}

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import {
     View,
     Text,
@@ -13,8 +13,7 @@ import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
 import { Header, Section } from '../components';
 import { useI18n } from '../hooks/useI18n';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-import { normalizeTheme } from '../utils/themeUtils';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 
 const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
@@ -29,14 +28,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
     const [evidence, setEvidence] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const normalizedTheme = normalizeTheme(theme);
-    const baseThemeStyles = useThemeStyles(normalizedTheme);
-    const themeStyles = useMemo(() => ({
-        ...baseThemeStyles,
-        inputBackgroundColor: baseThemeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7',
-        inputTextColor: baseThemeStyles.textColor,
-        placeholderTextColor: baseThemeStyles.mutedTextColor,
-    }), [baseThemeStyles]);
+    const bloomTheme = useTheme();
 
     const handleSubmit = useCallback(async () => {
         if (!reason.trim()) {
@@ -83,10 +75,10 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
     }, [reason, evidence, oxyServices, t, goBack]);
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('accountVerification.title') || 'Account Verification'}
-                
+
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
@@ -94,30 +86,26 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 <Section  isFirst={true}>
-                    <Text style={[styles.description, { color: themeStyles.mutedTextColor }]}>
+                    <Text style={styles.description} className="text-muted-foreground">
                         {t('accountVerification.description') || 'Request a verified badge for your account. Verified accounts help establish authenticity and credibility.'}
                     </Text>
                 </Section>
 
                 <Section title={t('accountVerification.sections.request') || 'VERIFICATION REQUEST'} >
                     <View style={styles.inputGroup}>
-                        <Text style={[styles.label, { color: themeStyles.textColor }]}>
+                        <Text style={styles.label} className="text-foreground">
                             {t('accountVerification.reasonLabel') || 'Reason for Verification *'}
                         </Text>
                         <TextInput
                             style={[
                                 styles.textInput,
                                 styles.textArea,
-                                {
-                                    backgroundColor: themeStyles.inputBackgroundColor,
-                                    color: themeStyles.inputTextColor,
-                                    borderColor: themeStyles.borderColor,
-                                },
                             ]}
+                            className="bg-secondary text-foreground border-border"
                             value={reason}
                             onChangeText={setReason}
                             placeholder={t('accountVerification.reasonPlaceholder') || 'Explain why you need a verified badge (e.g., public figure, brand, organization)'}
-                            placeholderTextColor={themeStyles.placeholderTextColor}
+                            placeholderTextColor={bloomTheme.colors.textSecondary}
                             multiline
                             numberOfLines={4}
                             textAlignVertical="top"
@@ -126,23 +114,19 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                     </View>
 
                     <View style={styles.inputGroup}>
-                        <Text style={[styles.label, { color: themeStyles.textColor }]}>
+                        <Text style={styles.label} className="text-foreground">
                             {t('accountVerification.evidenceLabel') || 'Evidence (Optional)'}
                         </Text>
                         <TextInput
                             style={[
                                 styles.textInput,
                                 styles.textArea,
-                                {
-                                    backgroundColor: themeStyles.inputBackgroundColor,
-                                    color: themeStyles.inputTextColor,
-                                    borderColor: themeStyles.borderColor,
-                                },
                             ]}
+                            className="bg-secondary text-foreground border-border"
                             value={evidence}
                             onChangeText={setEvidence}
                             placeholder={t('accountVerification.evidencePlaceholder') || 'Provide any supporting documentation or links (e.g., official website, social media profiles)'}
-                            placeholderTextColor={themeStyles.placeholderTextColor}
+                            placeholderTextColor={bloomTheme.colors.textSecondary}
                             multiline
                             numberOfLines={4}
                             textAlignVertical="top"
@@ -153,10 +137,8 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
 
                 <Section >
                     <TouchableOpacity
-                        style={[
-                            styles.submitButton,
-                            { backgroundColor: isSubmitting ? themeStyles.mutedTextColor : '#007AFF' },
-                        ]}
+                        style={styles.submitButton}
+                        className={isSubmitting ? 'bg-muted-foreground' : 'bg-primary'}
                         onPress={handleSubmit}
                         disabled={isSubmitting || !reason.trim()}
                     >
@@ -171,7 +153,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                 </Section>
 
                 <Section >
-                    <Text style={[styles.note, { color: themeStyles.mutedTextColor }]}>
+                    <Text style={styles.note} className="text-muted-foreground">
                         {t('accountVerification.note') || 'Note: Verification requests are reviewed manually and may take several days. We will notify you once your request has been reviewed.'}
                     </Text>
                 </Section>

package/src/ui/screens/AppInfoScreen.tsx

@@ -18,8 +18,10 @@ import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { SettingsIcon } from '../components/SettingsIcon';
-import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../hooks/useColorScheme';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
@@ -47,11 +49,13 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
     const [isRunningSystemCheck, setIsRunningSystemCheck] = useState(false);
     const [connectionStatus, setConnectionStatus] = useState<'checking' | 'connected' | 'disconnected' | 'unknown'>('unknown');
 
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const normalizedColorScheme = normalizeColorScheme(colorScheme);
+    const themeColors = Colors[normalizedColorScheme];
     // AppInfoScreen uses a slightly different light background
-    const backgroundColor = themeStyles.isDarkTheme ? themeStyles.backgroundColor : '#f2f2f2';
-    const primaryColor = themeStyles.colors.iconSecurity;
+    const backgroundColor = bloomTheme.isDark ? bloomTheme.colors.background : '#f2f2f2';
+    const primaryColor = themeColors.iconSecurity;
 
     useEffect(() => {
         const updateDimensions = () => {
@@ -177,30 +181,30 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         onPress={() => copyToClipboard(packageInfo.name, t('appInfo.items.name'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="tag" color={themeStyles.colors.iconData} />}
+                        icon={<SettingsIcon name="tag" color={themeColors.iconData} />}
                         title={t('appInfo.items.version')}
                         description={packageInfo.version}
                         onPress={() => copyToClipboard(packageInfo.version, t('appInfo.items.version'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="file-document" color={themeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="file-document" color={themeColors.iconPersonalInfo} />}
                         title={t('appInfo.items.description')}
                         description={packageInfo.description || t('appInfo.items.noDescription')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="code-tags" color={themeStyles.colors.iconStorage} />}
+                        icon={<SettingsIcon name="code-tags" color={themeColors.iconStorage} />}
                         title={t('appInfo.items.mainEntry')}
                         description={packageInfo.main || 'N/A'}
                         onPress={() => copyToClipboard(packageInfo.main || 'N/A', t('appInfo.items.mainEntry'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="library" color={themeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="library" color={themeColors.iconSharing} />}
                         title={t('appInfo.items.moduleEntry')}
                         description={packageInfo.module || 'N/A'}
                         onPress={() => copyToClipboard(packageInfo.module || 'N/A', t('appInfo.items.moduleEntry'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="wrench" color={themeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="wrench" color={themeColors.iconPersonalInfo} />}
                         title={t('appInfo.items.typesEntry')}
                         description={packageInfo.types || 'N/A'}
                         onPress={() => copyToClipboard(packageInfo.types || 'N/A', t('appInfo.items.typesEntry'))}
@@ -210,27 +214,27 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* System Information */}
                 <SettingsListGroup title={t('appInfo.sections.system')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="cellphone" color={themeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="cellphone" color={themeColors.iconSecurity} />}
                         title={t('appInfo.items.platform')}
                         description={Platform.OS}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="chip" color={themeStyles.colors.iconData} />}
+                        icon={<SettingsIcon name="chip" color={themeColors.iconData} />}
                         title={t('appInfo.items.platformVersion')}
                         description={systemInfo?.version || t('common.status.loading')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="resize" color={themeStyles.colors.iconStorage} />}
+                        icon={<SettingsIcon name="resize" color={themeColors.iconStorage} />}
                         title={t('appInfo.items.screenWidth')}
                         description={`${systemInfo?.screenDimensions.width || 0}px`}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="resize" color={themeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="resize" color={themeColors.iconSharing} />}
                         title={t('appInfo.items.screenHeight')}
                         description={`${systemInfo?.screenDimensions.height || 0}px`}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="cog" color={themeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="cog" color={themeColors.iconPersonalInfo} />}
                         title={t('appInfo.items.environment')}
                         description={__DEV__ ? t('appInfo.items.development') : t('appInfo.items.production')}
                     />
@@ -239,20 +243,20 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* User Information */}
                 <SettingsListGroup title={t('appInfo.sections.user')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="shield-check" color={isAuthenticated ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="shield-check" color={isAuthenticated ? themeColors.iconPersonalInfo : themeColors.iconSharing} />}
                         title={t('appInfo.items.authStatus')}
                         description={isAuthenticated ? t('appInfo.items.authenticated') : t('appInfo.items.notAuthenticated')}
                     />
                     {user && (
                         <>
                             <SettingsListItem
-                                icon={<SettingsIcon name="account" color={themeStyles.colors.iconSecurity} />}
+                                icon={<SettingsIcon name="account" color={themeColors.iconSecurity} />}
                                 title={t('appInfo.items.userId')}
                                 description={user.id}
                                 onPress={() => copyToClipboard(user.id, t('appInfo.items.userId'))}
                             />
                             <SettingsListItem
-                                icon={<SettingsIcon name="at" color={themeStyles.colors.iconData} />}
+                                icon={<SettingsIcon name="at" color={themeColors.iconData} />}
                                 title={t('appInfo.items.username')}
                                 description={user.username || 'N/A'}
                                 onPress={() => {
@@ -264,7 +268,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                                 }}
                             />
                             <SettingsListItem
-                                icon={<SettingsIcon name="email" color={themeStyles.colors.iconStorage} />}
+                                icon={<SettingsIcon name="email" color={themeColors.iconStorage} />}
                                 title={t('appInfo.items.email')}
                                 description={user.email || 'N/A'}
                             />
@@ -276,7 +280,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         </>
                     )}
                     <SettingsListItem
-                        icon={<SettingsIcon name="account-group" color={themeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="account-group" color={themeColors.iconPersonalInfo} />}
                         title={t('appInfo.items.totalActiveSessions')}
                         description={sessions?.length?.toString() || '0'}
                     />
@@ -285,7 +289,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* API Configuration */}
                 <SettingsListGroup title={t('appInfo.sections.api')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="server" color={themeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="server" color={themeColors.iconSecurity} />}
                         title={t('appInfo.items.apiBaseUrl')}
                         description={oxyServices?.getBaseURL() || t('appInfo.items.notConfigured')}
                         onPress={() => copyToClipboard(oxyServices?.getBaseURL() || t('appInfo.items.notConfigured'), t('appInfo.items.apiBaseUrl'))}
@@ -293,7 +297,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                     <SettingsListItem
                         icon={<SettingsIcon
                             name={connectionStatus === 'checking' ? 'sync' : connectionStatus === 'connected' ? 'wifi' : 'wifi-off'}
-                            color={connectionStatus === 'checking' ? themeStyles.colors.iconStorage : connectionStatus === 'connected' ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing}
+                            color={connectionStatus === 'checking' ? themeColors.iconStorage : connectionStatus === 'connected' ? themeColors.iconPersonalInfo : themeColors.iconSharing}
                         />}
                         title={t('appInfo.items.connectionStatus')}
                         description={connectionStatus === 'checking' ? t('appInfo.items.checking') : connectionStatus === 'connected' ? t('appInfo.items.connected') : connectionStatus === 'disconnected' ? t('appInfo.items.disconnected') : t('appInfo.items.unknown')}
@@ -321,7 +325,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* Build Information */}
                 <SettingsListGroup title={t('appInfo.sections.build')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="clock" color={themeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="clock" color={themeColors.iconSecurity} />}
                         title={t('appInfo.items.buildTimestamp')}
                         description={systemInfo?.timestamp || t('common.status.loading')}
                         onPress={() => copyToClipboard(systemInfo?.timestamp || t('common.status.loading'), t('appInfo.items.buildTimestamp'))}
@@ -332,7 +336,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         description={t('appInfo.items.reactNativeValue')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="flash" color={themeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="flash" color={themeColors.iconSharing} />}
                         title={t('appInfo.items.jsEngine')}
                         description={t('appInfo.items.jsEngineValue')}
                     />
@@ -341,7 +345,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* Quick Actions */}
                 <SettingsListGroup title={t('appInfo.sections.quickActions')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="content-copy" color={themeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="content-copy" color={themeColors.iconSecurity} />}
                         title={t('appInfo.items.copyFullReport')}
                         description={t('appInfo.items.copyFullReportSubtitle')}
                         onPress={handleCopyFullReport}

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -13,8 +13,7 @@ import {
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/useColorScheme';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { Header } from '../components';
 import { useI18n } from '../hooks/useI18n';
@@ -78,10 +77,8 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
     const { user } = useOxy();
     const { t } = useI18n();
     const { saveProfile, updateField, isSaving } = useProfileEditing();
-    const colorScheme = useColorScheme();
+    const bloomTheme = useTheme();
     const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
-    const colors = themeStyles.colors;
 
     // State for field values
     const [fieldValues, setFieldValues] = useState<Record<string, string>>({});
@@ -417,24 +414,24 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
 
         return (
             <View key={field.key} style={styles.inputGroup}>
-                <Text style={[styles.label, { color: colors.text }]}>
+                <Text style={[styles.label, { color: bloomTheme.colors.text }]}>
                     {field.label}
                 </Text>
                 <TextInput
                     style={[
                         isTextarea ? styles.textArea : styles.input,
                         {
-                            backgroundColor: colors.card,
-                            color: colors.text,
-                            borderColor: fieldErrors[field.key] ? '#FF3B30' : colors.border,
+                            backgroundColor: bloomTheme.colors.card,
+                            color: bloomTheme.colors.text,
+                            borderColor: fieldErrors[field.key] ? '#FF3B30' : bloomTheme.colors.border,
                         },
                     ]}
                     value={fieldValues[field.key] || ''}
                     onChangeText={(value) => handleFieldChange(field.key, value)}
                     placeholder={field.placeholder}
-                    placeholderTextColor={colors.secondaryText}
+                    placeholderTextColor={bloomTheme.colors.textSecondary}
                     autoFocus={index === 0}
-                    selectionColor={colors.tint}
+                    selectionColor={bloomTheme.colors.primary}
                     {...field.inputProps}
                 />
                 {fieldErrors[field.key] && (
@@ -459,23 +456,23 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
         return (
             <>
                 <View style={styles.inputGroup}>
-                    <Text style={[styles.label, { color: colors.text }]}>{addLabel}</Text>
+                    <Text style={[styles.label, { color: bloomTheme.colors.text }]}>{addLabel}</Text>
                     <View style={styles.addItemRow}>
                         <TextInput
                             style={[
                                 styles.input,
                                 {
-                                    backgroundColor: colors.card,
-                                    color: colors.text,
-                                    borderColor: colors.border,
+                                    backgroundColor: bloomTheme.colors.card,
+                                    color: bloomTheme.colors.text,
+                                    borderColor: bloomTheme.colors.border,
                                     flex: 1,
                                 },
                             ]}
                             value={newItemValue}
                             onChangeText={setNewItemValue}
                             placeholder={placeholder}
-                            placeholderTextColor={colors.secondaryText}
-                            selectionColor={colors.tint}
+                            placeholderTextColor={bloomTheme.colors.textSecondary}
+                            selectionColor={bloomTheme.colors.primary}
                             autoCapitalize="none"
                             autoCorrect={false}
                             onSubmitEditing={handleAddItem}
@@ -485,7 +482,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                         <TouchableOpacity
                             style={[
                                 styles.addButton,
-                                { backgroundColor: newItemValue.trim() ? colors.tint : colors.border }
+                                { backgroundColor: newItemValue.trim() ? bloomTheme.colors.primary : bloomTheme.colors.border }
                             ]}
                             onPress={handleAddItem}
                             disabled={!newItemValue.trim()}
@@ -497,7 +494,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
 
                 {listItems.length > 0 && (
                     <View style={styles.listSection}>
-                        <Text style={[styles.listTitle, { color: colors.text }]}>
+                        <Text style={[styles.listTitle, { color: bloomTheme.colors.text }]}>
                             {listTitle} ({listItems.length})
                         </Text>
                         {listItems.map((item: any) => (
@@ -505,18 +502,18 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                                 key={item.id}
                                 style={[
                                     styles.listItem,
-                                    { backgroundColor: colors.card, borderColor: colors.border }
+                                    { backgroundColor: bloomTheme.colors.card, borderColor: bloomTheme.colors.border }
                                 ]}
                             >
                                 {fieldType === 'links' && item.image && (
                                     <Image source={{ uri: item.image }} style={styles.linkImage} />
                                 )}
                                 <View style={styles.listItemContent}>
-                                    <Text style={[styles.listItemTitle, { color: colors.text }]} numberOfLines={1}>
+                                    <Text style={[styles.listItemTitle, { color: bloomTheme.colors.text }]} numberOfLines={1}>
                                         {fieldType === 'locations' ? item.name : (item.title || item.url)}
                                     </Text>
                                     {fieldType === 'links' && (
-                                        <Text style={[styles.listItemSubtitle, { color: colors.secondaryText }]} numberOfLines={1}>
+                                        <Text style={[styles.listItemSubtitle, { color: bloomTheme.colors.textSecondary }]} numberOfLines={1}>
                                             {item.url}
                                         </Text>
                                     )}
@@ -537,7 +534,8 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
 
     return (
         <KeyboardAvoidingView
-            style={[styles.container, { backgroundColor: normalizedTheme === 'dark' ? '#000000' : '#F5F5F5' }]}
+            style={styles.container}
+            className="bg-background"
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         >
             <Header
@@ -563,18 +561,18 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
             >
                 {/* Big Title */}
                 <View style={styles.titleContainer}>
-                    <Text style={[styles.bigTitle, { color: colors.text }]}>
+                    <Text style={[styles.bigTitle, { color: bloomTheme.colors.text }]}>
                         {fieldConfig.title}
                     </Text>
                     {fieldConfig.subtitle && (
-                        <Text style={[styles.bigSubtitle, { color: colors.secondaryText }]}>
+                        <Text style={[styles.bigSubtitle, { color: bloomTheme.colors.textSecondary }]}>
                             {fieldConfig.subtitle}
                         </Text>
                     )}
                 </View>
 
                 {/* Form Content */}
-                <View style={[styles.formCard, { backgroundColor: colors.card }]}>
+                <View style={[styles.formCard, { backgroundColor: bloomTheme.colors.card }]}>
                     {fieldConfig.isList ? renderListContent() : fieldConfig.fields.map(renderField)}
                 </View>
             </ScrollView>