@oxyhq/services 6.9.32 → 6.9.34

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

@@ -4,10 +4,11 @@ import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Image } fr
 import { Image as ExpoImage } from 'expo-image';
 // @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
-import type { ThemeStyles } from '../../hooks/useThemeStyles';
+import { Colors } from '../../constants/theme';
 import { GroupedSection } from '../GroupedSection';
 
 interface FileViewerProps {
@@ -19,8 +20,9 @@ interface FileViewerProps {
     onClose: () => void;
     onDownload: (fileId: string, filename: string) => void;
     onDelete: (fileId: string, filename: string) => void;
-    themeStyles: ThemeStyles;
     isOwner: boolean;
+    /** @deprecated No longer used. Colors are sourced from useTheme() internally. */
+    themeStyles?: unknown;
 }
 
 export const FileViewer: React.FC<FileViewerProps> = ({
@@ -32,9 +34,10 @@ export const FileViewer: React.FC<FileViewerProps> = ({
     onClose,
     onDownload,
     onDelete,
-    themeStyles,
     isOwner,
 }) => {
+    const { colors, isDark } = useTheme();
+    const constantColors = Colors[isDark ? 'dark' : 'light'];
     const isImage = file.contentType.startsWith('image/');
     const isText = file.contentType.startsWith('text/') ||
         file.contentType.includes('json') ||
@@ -45,10 +48,9 @@ export const FileViewer: React.FC<FileViewerProps> = ({
     const isVideo = file.contentType.startsWith('video/');
     const isAudio = file.contentType.startsWith('audio/');
 
-    const backgroundColor = isImage && fileContent
+    const bgColor = isImage && fileContent
         ? 'transparent'
-        : themeStyles.backgroundColor;
-    const borderColor = themeStyles.borderColor;
+        : undefined;
 
     const [containerWidth, setContainerWidth] = useState<number>(0);
     const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
@@ -107,28 +109,28 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             {
                 id: 'filename',
                 icon: 'file-document',
-                iconColor: themeStyles.colors.iconSecurity,
+                iconColor: constantColors.iconSecurity,
                 title: 'File Name',
                 subtitle: file.filename,
             },
             {
                 id: 'size',
                 icon: 'server',
-                iconColor: themeStyles.colors.iconStorage,
+                iconColor: constantColors.iconStorage,
                 title: 'Size',
                 subtitle: formatFileSize(file.length),
             },
             {
                 id: 'type',
                 icon: 'code-tags',
-                iconColor: themeStyles.colors.iconData,
+                iconColor: constantColors.iconData,
                 title: 'Type',
                 subtitle: file.contentType,
             },
             {
                 id: 'uploaded',
                 icon: 'clock',
-                iconColor: themeStyles.colors.iconPersonalInfo,
+                iconColor: constantColors.iconPersonalInfo,
                 title: 'Uploaded',
                 subtitle: new Date(file.uploadDate).toLocaleString(),
             },
@@ -138,7 +140,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             items.push({
                 id: 'description',
                 icon: 'text',
-                iconColor: themeStyles.colors.iconData,
+                iconColor: constantColors.iconData,
                 title: 'Description',
                 subtitle: file.metadata.description,
             });
@@ -147,16 +149,19 @@ export const FileViewer: React.FC<FileViewerProps> = ({
         items.push({
             id: 'fileId',
             icon: 'key',
-            iconColor: themeStyles.colors.iconSecurity,
+            iconColor: constantColors.iconSecurity,
             title: 'File ID',
             subtitle: file.id,
         });
 
         return items;
-    }, [file, themeStyles.colors]);
+    }, [file, constantColors]);
 
     return (
-        <View style={[fileManagementStyles.fileViewerContainer, { backgroundColor }]}>
+        <View
+            className={isImage && fileContent ? undefined : 'bg-background'}
+            style={[fileManagementStyles.fileViewerContainer, bgColor ? { backgroundColor: bgColor } : undefined]}
+        >
             {/* Blurred Background Image - only for images */}
             {isImage && fileContent && (
                 <>
@@ -168,24 +173,26 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         transition={120}
                         cachePolicy="memory-disk"
                     />
-                    <View style={[fileManagementStyles.backgroundOverlay, { backgroundColor: themeStyles.isDarkTheme ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.85)' }]} />
+                    <View style={[fileManagementStyles.backgroundOverlay, { backgroundColor: isDark ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.85)' }]} />
                 </>
             )}
 
             {/* Floating Back Button */}
             <TouchableOpacity
-                style={[fileManagementStyles.floatingBackButton, { backgroundColor: themeStyles.colors.card }]}
+                className="bg-card"
+                style={fileManagementStyles.floatingBackButton}
                 onPress={onClose}
             >
-                <MaterialCommunityIcons name="arrow-left" size={20} color={themeStyles.textColor} />
+                <MaterialCommunityIcons name="arrow-left" size={20} color={colors.text} />
             </TouchableOpacity>
 
             {/* Floating Download Button */}
             <TouchableOpacity
-                style={[fileManagementStyles.floatingDownloadButton, { backgroundColor: themeStyles.colors.card }]}
+                className="bg-card"
+                style={fileManagementStyles.floatingDownloadButton}
                 onPress={() => onDownload(file.id, file.filename)}
             >
-                <MaterialCommunityIcons name="download" size={20} color={themeStyles.primaryColor} />
+                <MaterialCommunityIcons name="download" size={20} color={colors.primary} />
             </TouchableOpacity>
 
             {/* File Content */}
@@ -195,13 +202,13 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             >
                 {loadingFileContent ? (
                     <View style={fileManagementStyles.fileViewerLoading}>
-                        <ActivityIndicator size="large" color={themeStyles.primaryColor} />
-                        <Text style={[fileManagementStyles.fileViewerLoadingText, { color: themeStyles.textColor }]}>
+                        <ActivityIndicator size="large" color={colors.primary} />
+                        <Text className="text-foreground" style={fileManagementStyles.fileViewerLoadingText}>
                             Loading file content...
                         </Text>
                     </View>
                 ) : isImage && fileContent ? (
-                    <View 
+                    <View
                         style={fileManagementStyles.imageContainer}
                         onLayout={(e) => {
                             const width = e.nativeEvent.layout.width;
@@ -210,7 +217,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             }
                         }}
                     >
-                        <View 
+                        <View
                             style={[
                                 fileManagementStyles.imageWrapper,
                                 {
@@ -236,9 +243,9 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         </View>
                     </View>
                 ) : isText && fileContent ? (
-                    <View style={[fileManagementStyles.textContainer, { backgroundColor: themeStyles.colors.card }]}>
+                    <View className="bg-card" style={fileManagementStyles.textContainer}>
                         <ScrollView style={{ flex: 1 }} nestedScrollEnabled>
-                            <Text style={[fileManagementStyles.textContent, { color: themeStyles.textColor }]}>
+                            <Text className="text-foreground" style={fileManagementStyles.textContent}>
                                 {fileContent}
                             </Text>
                         </ScrollView>
@@ -248,17 +255,18 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name="file-pdf-box"
                             size={64}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
-                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
                             PDF Preview Not Available
                         </Text>
-                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
                             PDF files cannot be previewed in this viewer.{'\n'}
                             Download the file to view its contents.
                         </Text>
                         <TouchableOpacity
-                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            className="bg-primary"
+                            style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
                             <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
@@ -270,17 +278,18 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name="video-outline"
                             size={64}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
-                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
                             Video Playback Not Available
                         </Text>
-                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
                             Video playback is not supported in this viewer.{'\n'}
                             Download the file to view it.
                         </Text>
                         <TouchableOpacity
-                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            className="bg-primary"
+                            style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
                             <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
@@ -292,17 +301,18 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name="music-note-outline"
                             size={64}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
-                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
                             Audio Playback Not Available
                         </Text>
-                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
                             Audio playback is not supported in this viewer.{'\n'}
                             Download the file to listen to it.
                         </Text>
                         <TouchableOpacity
-                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            className="bg-primary"
+                            style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
                             <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
@@ -314,17 +324,18 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name="file-outline"
                             size={64}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
-                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
                             Preview Not Available
                         </Text>
-                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
                             This file type cannot be previewed.{'\n'}
                             Download the file to view its contents.
                         </Text>
                         <TouchableOpacity
-                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            className="bg-primary"
+                            style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
                             <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
@@ -335,9 +346,9 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             </ScrollView>
 
             {/* File Details Section - at bottom */}
-            <View style={[fileManagementStyles.fileDetailsSection, { backgroundColor: themeStyles.colors.card }]}>
+            <View className="bg-card" style={fileManagementStyles.fileDetailsSection}>
                 <View style={fileManagementStyles.fileDetailsSectionHeader}>
-                    <Text style={[fileManagementStyles.fileDetailsSectionTitle, { color: themeStyles.textColor }]}>
+                    <Text className="text-foreground" style={fileManagementStyles.fileDetailsSectionTitle}>
                         File Details
                     </Text>
                     <TouchableOpacity
@@ -347,7 +358,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name={showFileDetailsInViewer ? "chevron-up" : "chevron-down"}
                             size={20}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
                     </TouchableOpacity>
                 </View>
@@ -361,7 +372,8 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         {isOwner && (
                             <View style={fileManagementStyles.fileDetailsActions}>
                                 <TouchableOpacity
-                                    style={[fileManagementStyles.fileDetailsActionButton, { backgroundColor: themeStyles.dangerColor }]}
+                                    className="bg-destructive"
+                                    style={fileManagementStyles.fileDetailsActionButton}
                                     onPress={() => {
                                         onClose();
                                         onDelete(file.id, file.filename);

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>