@oxyhq/services 6.9.32 → 6.9.34

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -10,8 +10,10 @@ import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
 import { Header, Section, GroupedSection, LoadingState, EmptyState } 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';
 import { useOxy } from '../context/OxyContext';
 
 interface SavedItem {
@@ -44,10 +46,12 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
     const [isLoading, setIsLoading] = useState(true);
     const [activeTab, setActiveTab] = useState<'saves' | 'collections'>('saves');
 
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
-    const tabActiveColor = themeStyles.colors.iconSecurity;
-    const tabInactiveColor = themeStyles.isDarkTheme ? '#888888' : '#666666';
+    const normalizedColorScheme = normalizeColorScheme(colorScheme);
+    const themeColors = Colors[normalizedColorScheme];
+    const tabActiveColor = themeColors.iconSecurity;
+    const tabInactiveColor = bloomTheme.isDark ? '#888888' : '#666666';
 
     // Load saved items and collections from API
     useEffect(() => {
@@ -89,7 +93,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('saves.title') || 'Saves & Collections'}
                 onBack={goBack || onClose}
@@ -98,7 +102,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
             />
 
             {/* Tabs */}
-            <View style={[styles.tabs, { borderBottomColor: themeStyles.borderColor }]}>
+            <View style={[styles.tabs, { borderBottomColor: bloomTheme.colors.border }]}>
                 <TouchableOpacity
                     style={[
                         styles.tab,
@@ -143,13 +147,13 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                 {isLoading ? (
                     <LoadingState
                         message={t('saves.loading') || 'Loading...'}
-                        color={themeStyles.textColor}
+                        color={bloomTheme.colors.text}
                     />
                 ) : activeTab === 'saves' ? (
                     savedItems.length === 0 ? (
                         <EmptyState
                             message={t('saves.empty') || 'No saved items yet'}
-                            textColor={themeStyles.textColor}
+                            textColor={bloomTheme.colors.text}
                         />
                     ) : (
                         <Section title={t('saves.savedItems') || 'Saved Items'} isFirst={true}>
@@ -157,7 +161,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                                 items={savedItems.map((item) => ({
                                     id: item.id,
                                     icon: item.type === 'post' ? 'document-text' : 'folder',
-                                    iconColor: item.type === 'post' ? themeStyles.colors.iconSecurity : themeStyles.colors.iconStorage,
+                                    iconColor: item.type === 'post' ? themeColors.iconSecurity : themeColors.iconStorage,
                                     title: item.title,
                                     subtitle: formatDate(item.savedAt),
                                 }))}
@@ -168,7 +172,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                     collections.length === 0 ? (
                         <EmptyState
                             message={t('saves.noCollections') || 'No collections yet'}
-                            textColor={themeStyles.textColor}
+                            textColor={bloomTheme.colors.text}
                         />
                     ) : (
                         <Section title={t('saves.collections') || 'Collections'} isFirst={true}>
@@ -176,7 +180,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                                 items={collections.map((collection) => ({
                                     id: collection.id,
                                     icon: 'folder',
-                                    iconColor: themeStyles.colors.iconStorage,
+                                    iconColor: themeColors.iconStorage,
                                     title: collection.name,
                                     subtitle: `${collection.itemCount || 0} items`,
                                 }))}

package/src/ui/screens/SearchSettingsScreen.tsx

@@ -7,9 +7,8 @@ import {
 import type { BaseScreenProps } from '../types/navigation';
 import { Header, Section, LoadingState, SettingRow } from '../components';
 import { useI18n } from '../hooks/useI18n';
-import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useSettingToggles } from '../hooks/useSettingToggle';
-import { normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 import type { User } from '@oxyhq/core';
 
@@ -75,25 +74,24 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
         loadSettings();
     }, [user?.id, oxyServices, setValues]);
 
-    const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme);
+    const bloomTheme = useTheme();
 
     if (isLoading) {
         return (
-            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <View style={styles.container} className="bg-background">
                 <Header
                     title={t('searchSettings.title') || 'Search Settings'}
                     onBack={goBack || onClose}
                     variant="minimal"
                     elevation="subtle"
                 />
-                <LoadingState color={themeStyles.textColor} />
+                <LoadingState color={bloomTheme.colors.text} />
             </View>
         );
     }
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('searchSettings.title') || 'Search Settings'}
 
@@ -111,9 +109,9 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
                         value={settings.safeSearch}
                         onValueChange={() => toggle('safeSearch')}
                         disabled={isSaving}
-                        textColor={themeStyles.textColor}
-                        mutedTextColor={themeStyles.mutedTextColor}
-                        borderColor={themeStyles.borderColor}
+                        textColor={bloomTheme.colors.text}
+                        mutedTextColor={bloomTheme.colors.textSecondary}
+                        borderColor={bloomTheme.colors.border}
                     />
                 </Section>
 
@@ -125,9 +123,9 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
                         value={settings.searchPersonalization}
                         onValueChange={() => toggle('searchPersonalization')}
                         disabled={isSaving}
-                        textColor={themeStyles.textColor}
-                        mutedTextColor={themeStyles.mutedTextColor}
-                        borderColor={themeStyles.borderColor}
+                        textColor={bloomTheme.colors.text}
+                        mutedTextColor={bloomTheme.colors.textSecondary}
+                        borderColor={bloomTheme.colors.border}
                     />
                 </Section>
             </ScrollView>

package/src/ui/screens/SessionManagementScreen.tsx

@@ -17,8 +17,7 @@ import { toast } from '../../lib/sonner';
 import type { ClientSession } from '@oxyhq/core';
 import { confirmAction } from '../utils/confirmAction';
 import { Header, GroupedSection } from '../components';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-import { normalizeTheme } from '../utils/themeUtils';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 
@@ -54,11 +53,12 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     const [switchLoading, setSwitchLoading] = useState<string | null>(null);
     const [lastRefreshed, setLastRefreshed] = useState<Date | null>(null);
 
-    // Use centralized theme styles hook for consistency
-    const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme);
-    // Extract commonly used colors for readability
-    const { textColor, backgroundColor, borderColor, primaryColor, dangerColor, successColor, isDarkTheme } = themeStyles;
+    // Use bloom theme for non-style color props (ActivityIndicator, icon colors, etc.)
+    const bloomTheme = useTheme();
+    const isDarkTheme = bloomTheme.isDark;
+    const primaryColor = bloomTheme.colors.primary;
+    const dangerColor = bloomTheme.colors.error;
+    const successColor = bloomTheme.colors.success || '#34C759';
 
     // Memoized load sessions function - prevents unnecessary re-renders
     const loadSessions = useCallback(async (isRefresh = false) => {
@@ -291,15 +291,15 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
 
     if (loading) {
         return (
-            <View style={[styles.container, styles.centerContent, { backgroundColor }]}>
+            <View style={[styles.container, styles.centerContent]} className="bg-background">
                 <ActivityIndicator size="large" color={primaryColor} />
-                <Text style={[styles.loadingText, { color: textColor }]}>{t('sessionManagement.loading')}</Text>
+                <Text style={styles.loadingText} className="text-foreground">{t('sessionManagement.loading')}</Text>
             </View>
         );
     }
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('sessionManagement.title')}
                 subtitle={t('sessionManagement.subtitle')}
@@ -337,9 +337,9 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                     </View>
                 )}
             </ScrollView>
-            <View style={[styles.footer, { borderTopColor: borderColor }]}>
+            <View style={styles.footer} className="border-border">
                 <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-                    <Text style={[styles.closeButtonText, { color: primaryColor }]}>{t('sessionManagement.close')}</Text>
+                    <Text style={styles.closeButtonText} className="text-primary">{t('sessionManagement.close')}</Text>
                 </TouchableOpacity>
             </View>
         </View>

package/src/ui/screens/UserLinksScreen.tsx

@@ -3,8 +3,7 @@ import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, Linking }
 import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
 import { Header, GroupedSection } from '../components';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-import { normalizeTheme } from '../utils/themeUtils';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useI18n } from '../hooks/useI18n';
 
 interface UserLinksScreenProps extends BaseScreenProps {
@@ -25,10 +24,7 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
     goBack,
     navigate
 }) => {
-    // Use centralized theme styles hook for consistency
-    // primaryColor from hook (#007AFF) is already correct for this screen
-    const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme);
+    const bloomTheme = useTheme();
     const { t } = useI18n();
 
     const handleLinkPress = async (url: string) => {
@@ -54,7 +50,7 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
     }));
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('userLinks.title')}
                 subtitle={links.length !== 1 ? t('userLinks.linkCount_plural', { count: links.length }) : t('userLinks.linkCount', { count: links.length })}
@@ -64,7 +60,7 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 <View style={styles.section}>
-                    <Text style={[styles.sectionTitle, { color: themeStyles.textColor }]}>{t('userLinks.title')}</Text>
+                    <Text style={styles.sectionTitle} className="text-foreground">{t('userLinks.title')}</Text>
 
                     <GroupedSection
                         items={groupedItems}

package/src/ui/screens/UserListScreen.tsx

@@ -10,7 +10,7 @@ import {
   RefreshControl,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { useThemeColors, type ThemeColors } from '../styles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import Avatar from '../components/Avatar';
 import { FollowButton } from '../components';
 import { Ionicons } from '@expo/vector-icons';
@@ -46,8 +46,8 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [hasMore, setHasMore] = useState(true);
 
-  const colors = useThemeColors((theme as 'light' | 'dark') ?? 'light');
-  const styles = createStyles(colors);
+  const bloomTheme = useTheme();
+  const styles = createStyles();
   const { t } = useI18n();
 
   const currentUserId = currentUser?.id || (currentUser?._id as string | undefined);
@@ -145,16 +145,16 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
             size={48}
           />
           <View style={styles.userInfo}>
-            <Text style={styles.userName} numberOfLines={1}>
+            <Text style={styles.userName} className="text-foreground" numberOfLines={1}>
               {item.name?.full || item.username || 'Unknown User'}
             </Text>
             {item.username && (
-              <Text style={styles.userHandle} numberOfLines={1}>
+              <Text style={styles.userHandle} className="text-muted-foreground" numberOfLines={1}>
                 @{item.username}
               </Text>
             )}
             {description ? (
-              <Text style={styles.userBio} numberOfLines={2}>
+              <Text style={styles.userBio} className="text-foreground" numberOfLines={2}>
                 {description}
               </Text>
             ) : null}
@@ -167,7 +167,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         </TouchableOpacity>
       );
     },
-    [colors, styles, handleUserPress, currentUserId, oxyServices]
+    [bloomTheme, styles, handleUserPress, currentUserId, oxyServices]
   );
 
   const renderEmpty = useCallback(() => {
@@ -177,30 +177,30 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         <Ionicons
           name={mode === 'followers' ? 'people-outline' : 'heart-outline'}
           size={64}
-          color={colors.secondaryText}
+          color={bloomTheme.colors.textSecondary}
         />
-        <Text style={styles.emptyTitle}>
+        <Text style={styles.emptyTitle} className="text-foreground">
           {mode === 'followers'
             ? t('userList.noFollowers') || 'No followers yet'
             : t('userList.noFollowing') || 'Not following anyone'}
         </Text>
-        <Text style={styles.emptySubtitle}>
+        <Text style={styles.emptySubtitle} className="text-muted-foreground">
           {mode === 'followers'
             ? t('userList.noFollowersDesc') || 'When people follow this user, they will appear here.'
             : t('userList.noFollowingDesc') || 'When this user follows people, they will appear here.'}
         </Text>
       </View>
     );
-  }, [isLoading, mode, colors, styles, t]);
+  }, [isLoading, mode, bloomTheme, styles, t]);
 
   const renderFooter = useCallback(() => {
     if (!isLoadingMore) return null;
     return (
       <View style={styles.footerLoader}>
-        <ActivityIndicator size="small" color={colors.primary} />
+        <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
       </View>
     );
-  }, [isLoadingMore, colors, styles]);
+  }, [isLoadingMore, bloomTheme, styles]);
 
   const title = mode === 'followers'
     ? (t('userList.followers') || 'Followers')
@@ -208,18 +208,18 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
 
   if (isLoading && users.length === 0) {
     return (
-      <View style={styles.container}>
-        <View style={styles.header}>
+      <View style={styles.container} className="bg-background">
+        <View style={styles.header} className="border-border">
           {goBack && (
             <TouchableOpacity onPress={goBack} style={styles.backButton}>
-              <Ionicons name="arrow-back" size={24} color={colors.text} />
+              <Ionicons name="arrow-back" size={24} color={bloomTheme.colors.text} />
             </TouchableOpacity>
           )}
-          <Text style={styles.headerTitle}>{title}</Text>
+          <Text style={styles.headerTitle} className="text-foreground">{title}</Text>
           <View style={styles.headerRight} />
         </View>
         <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color={colors.primary} />
+          <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
         </View>
       </View>
     );
@@ -227,20 +227,20 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
 
   if (error) {
     return (
-      <View style={styles.container}>
-        <View style={styles.header}>
+      <View style={styles.container} className="bg-background">
+        <View style={styles.header} className="border-border">
           {goBack && (
             <TouchableOpacity onPress={goBack} style={styles.backButton}>
-              <Ionicons name="arrow-back" size={24} color={colors.text} />
+              <Ionicons name="arrow-back" size={24} color={bloomTheme.colors.text} />
             </TouchableOpacity>
           )}
-          <Text style={styles.headerTitle}>{title}</Text>
+          <Text style={styles.headerTitle} className="text-foreground">{title}</Text>
           <View style={styles.headerRight} />
         </View>
         <View style={styles.errorContainer}>
-          <Ionicons name="alert-circle" size={48} color={colors.error} />
-          <Text style={styles.errorText}>{error}</Text>
-          <TouchableOpacity style={styles.retryButton} onPress={() => fetchUsers(0)}>
+          <Ionicons name="alert-circle" size={48} color={bloomTheme.colors.error} />
+          <Text style={styles.errorText} className="text-destructive">{error}</Text>
+          <TouchableOpacity style={styles.retryButton} className="bg-primary" onPress={() => fetchUsers(0)}>
             <Text style={styles.retryButtonText}>{t('common.retry') || 'Retry'}</Text>
           </TouchableOpacity>
         </View>
@@ -249,16 +249,16 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
   }
 
   return (
-    <View style={styles.container}>
-      <View style={styles.header}>
+    <View style={styles.container} className="bg-background">
+      <View style={styles.header} className="border-border">
         {goBack && (
           <TouchableOpacity onPress={goBack} style={styles.backButton}>
-            <Ionicons name="arrow-back" size={24} color={colors.text} />
+            <Ionicons name="arrow-back" size={24} color={bloomTheme.colors.text} />
           </TouchableOpacity>
         )}
         <View style={styles.headerTitleContainer}>
-          <Text style={styles.headerTitle}>{title}</Text>
-          {total > 0 && <Text style={styles.headerCount}>{total}</Text>}
+          <Text style={styles.headerTitle} className="text-foreground">{title}</Text>
+          {total > 0 && <Text style={styles.headerCount} className="text-muted-foreground">{total}</Text>}
         </View>
         <View style={styles.headerRight} />
       </View>
@@ -267,7 +267,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         renderItem={renderUser}
         keyExtractor={(item, index) => item.id || (item._id as string) || `user-${index}`}
         contentContainerStyle={styles.listContent}
-        ItemSeparatorComponent={() => <View style={styles.separator} />}
+        ItemSeparatorComponent={() => <View style={styles.separator} className="bg-border" />}
         ListEmptyComponent={renderEmpty}
         ListFooterComponent={renderFooter}
         onEndReached={handleLoadMore}
@@ -276,8 +276,8 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
           <RefreshControl
             refreshing={isRefreshing}
             onRefresh={handleRefresh}
-            tintColor={colors.primary}
-            colors={[colors.primary]}
+            tintColor={bloomTheme.colors.primary}
+            colors={[bloomTheme.colors.primary]}
           />
         }
       />
@@ -285,11 +285,10 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
   );
 };
 
-const createStyles = (colors: ThemeColors) =>
+const createStyles = () =>
   StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: colors.background,
     },
     header: {
       flexDirection: 'row',
@@ -297,7 +296,6 @@ const createStyles = (colors: ThemeColors) =>
       paddingHorizontal: 16,
       paddingVertical: 12,
       borderBottomWidth: 1,
-      borderBottomColor: colors.border,
     },
     backButton: {
       padding: 8,
@@ -311,11 +309,9 @@ const createStyles = (colors: ThemeColors) =>
     headerTitle: {
       fontSize: 18,
       fontWeight: '600',
-      color: colors.text,
     },
     headerCount: {
       fontSize: 16,
-      color: colors.secondaryText,
       marginLeft: 8,
     },
     headerRight: {
@@ -334,13 +330,11 @@ const createStyles = (colors: ThemeColors) =>
     },
     errorText: {
       fontSize: 16,
-      color: colors.error,
       textAlign: 'center',
       marginTop: 16,
       marginBottom: 24,
     },
     retryButton: {
-      backgroundColor: colors.primary,
       paddingHorizontal: 24,
       paddingVertical: 12,
       borderRadius: 8,
@@ -367,16 +361,13 @@ const createStyles = (colors: ThemeColors) =>
     userName: {
       fontSize: 16,
       fontWeight: '600',
-      color: colors.text,
     },
     userHandle: {
       fontSize: 14,
-      color: colors.secondaryText,
       marginTop: 2,
     },
     userBio: {
       fontSize: 14,
-      color: colors.text,
       marginTop: 4,
       opacity: 0.8,
     },
@@ -385,7 +376,6 @@ const createStyles = (colors: ThemeColors) =>
     },
     separator: {
       height: 1,
-      backgroundColor: colors.border,
       marginLeft: 76,
     },
     emptyContainer: {
@@ -398,13 +388,11 @@ const createStyles = (colors: ThemeColors) =>
     emptyTitle: {
       fontSize: 18,
       fontWeight: '600',
-      color: colors.text,
       marginTop: 16,
       textAlign: 'center',
     },
     emptySubtitle: {
       fontSize: 14,
-      color: colors.secondaryText,
       marginTop: 8,
       textAlign: 'center',
     },

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -7,7 +7,7 @@ import Avatar from '../components/Avatar';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { useAuthStore } from '../stores/authStore';
-import { useThemeColors } from '../styles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { fontFamilies } from '../styles/fonts';
 import { normalizeTheme } from '../utils/themeUtils';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
@@ -68,8 +68,13 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     const { t } = useI18n();
     const updateProfileMutation = useUpdateProfile();
     const currentUser = user || newUser; // fallback
+    const bloomTheme = useTheme();
+    const colors = {
+        primary: bloomTheme.colors.primary,
+        border: bloomTheme.colors.border,
+        text: bloomTheme.colors.text,
+    };
     const normalizedTheme = normalizeTheme(theme);
-    const colors = useThemeColors(normalizedTheme);
     const styles = useMemo(() => createStyles(normalizedTheme), [normalizedTheme]);
 
     // Animation state
@@ -212,15 +217,15 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
             <Animated.View style={{ opacity: fadeAnim, transform: [{ translateX: slideAnim }] }}>
                 <View style={[styles.scrollInner, styles.contentContainer]}>
                     <View style={[styles.header, styles.sectionSpacing]}>
-                        <Text style={[styles.title, { color: colors.text }]}>{step.title}</Text>
-                        {step.body && <Text style={[styles.body, { color: colors.secondaryText }]}>{step.body}</Text>}
+                        <Text style={styles.title} className="text-foreground">{step.title}</Text>
+                        {step.body && <Text style={styles.body} className="text-muted-foreground">{step.body}</Text>}
                     </View>
                     {Array.isArray(step.bullets) && step.bullets.length > 0 && (
                         <View style={[styles.bulletContainer, styles.sectionSpacing]}>
                             {step.bullets.map(b => (
                                 <View key={b} style={styles.bulletRow}>
                                     <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
-                                    <Text style={[styles.bulletText, { color: colors.secondaryText }]}>{b}</Text>
+                                    <Text style={styles.bulletText} className="text-muted-foreground">{b}</Text>
                                 </View>
                             ))}
                         </View>
@@ -235,7 +240,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                                 backgroundColor={`${colors.primary}20`}
                                 style={styles.avatar}
                             />
-                            <TouchableOpacity style={[styles.changeAvatarButton, { backgroundColor: colors.primary }]} onPress={openAvatarPicker}>
+                            <TouchableOpacity style={styles.changeAvatarButton} className="bg-primary" onPress={openAvatarPicker}>
                                 <Ionicons name="image-outline" size={18} color="#FFFFFF" />
                                 <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>
                             </TouchableOpacity>

package/src/ui/screens/karma/KarmaAboutScreen.tsx

@@ -3,21 +3,17 @@ import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
 import { Header } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
-import { useThemeStyles } from '../../hooks/useThemeStyles';
-import { normalizeTheme } from '../../utils/themeUtils';
-import { useColorScheme } from '../../hooks/useColorScheme';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { fontFamilies } from '../../styles/fonts';
 
 const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const { t } = useI18n();
-    const colorScheme = useColorScheme();
-    const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    const bloomTheme = useTheme();
     // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('karma.about.title') || 'About Karma'}
                 subtitle={t('karma.about.subtitle') || 'Learn about the karma system'}
@@ -26,13 +22,13 @@ const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 elevation="subtle"
             />
             <ScrollView contentContainerStyle={styles.contentContainer}>
-                <Text style={[styles.paragraph, { color: themeStyles.textColor }]}>
+                <Text style={[styles.paragraph, { color: bloomTheme.colors.text }]}>
                     {t('karma.about.intro') || 'Karma is a recognition of your positive actions in the Oxy Ecosystem. It cannot be sent or received directly, only earned by contributing to the community.'}
                 </Text>
                 <Text style={[styles.section, { color: primaryColor }]}>
                     {t('karma.about.how.title') || 'How to Earn Karma'}
                 </Text>
-                <Text style={[styles.paragraph, { color: themeStyles.textColor }]}>
+                <Text style={[styles.paragraph, { color: bloomTheme.colors.text }]}>
                     • {t('karma.about.how.help') || 'Helping other users'}{'\n'}
                     • {t('karma.about.how.report') || 'Reporting bugs'}{'\n'}
                     • {t('karma.about.how.contribute') || 'Contributing content'}{'\n'}
@@ -42,7 +38,7 @@ const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 <Text style={[styles.section, { color: primaryColor }]}>
                     {t('karma.about.why.title') || 'Why Karma?'}
                 </Text>
-                <Text style={[styles.paragraph, { color: themeStyles.textColor }]}>
+                <Text style={[styles.paragraph, { color: bloomTheme.colors.text }]}>
                     {t('karma.about.why.text') || 'Karma unlocks special features and recognition in the Oxy Ecosystem. The more you contribute, the more you earn!'}
                 </Text>
             </ScrollView>