@oxyhq/services 6.9.32 → 6.9.34

package/src/ui/screens/HelpSupportScreen.tsx

@@ -10,8 +10,10 @@ import { toast } from '../../lib/sonner';
 import { Header } from '../components';
 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 } from '../utils/themeUtils';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 const HelpSupportScreen: React.FC<BaseScreenProps> = ({
@@ -21,8 +23,10 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     navigate,
 }) => {
     const { t } = useI18n();
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const normalizedColorScheme = normalizeColorScheme(colorScheme);
+    const themeColors = Colors[normalizedColorScheme];
 
     const handleContactSupport = useMemo(() => () => {
         Linking.openURL('mailto:support@oxy.so?subject=Support Request').catch(() => {
@@ -46,7 +50,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     }, [t]);
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('help.title') || 'Help & Support'}
 
@@ -59,19 +63,19 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                 {/* Help Options */}
                 <SettingsListGroup title={t('help.options') || 'Get Help'}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="help-circle" color={themeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="help-circle" color={themeColors.iconSecurity} />}
                         title={t('help.faq.title') || 'Frequently Asked Questions'}
                         description={t('help.faq.subtitle') || 'Find answers to common questions'}
                         onPress={handleFAQ}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="email" color={themeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="email" color={themeColors.iconPersonalInfo} />}
                         title={t('help.contact.title') || 'Contact Support'}
                         description={t('help.contact.subtitle') || 'Get help from our support team'}
                         onPress={handleContactSupport}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="bug" color={themeStyles.colors.iconStorage} />}
+                        icon={<SettingsIcon name="bug" color={themeColors.iconStorage} />}
                         title={t('help.reportBug.title') || 'Report a Bug'}
                         description={t('help.reportBug.subtitle') || 'Help us improve by reporting issues'}
                         onPress={handleReportBug}
@@ -91,7 +95,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                         }}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="account-group" color={themeStyles.colors.iconData} />}
+                        icon={<SettingsIcon name="account-group" color={themeColors.iconData} />}
                         title={t('help.community.title') || 'Community'}
                         description={t('help.community.subtitle') || 'Join our community'}
                         onPress={() => {
@@ -101,7 +105,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                         }}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="code-tags" color={themeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="code-tags" color={themeColors.iconSharing} />}
                         title={t('help.developersPortal.title') || 'Developers Portal'}
                         description={t('help.developersPortal.subtitle') || 'API documentation and developer resources'}
                         onPress={() => {

package/src/ui/screens/HistoryViewScreen.tsx

@@ -9,8 +9,10 @@ import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
 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 HistoryItem {
@@ -28,8 +30,10 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
     // Use useOxy() hook for OxyContext values
     const { user } = useOxy();
     const { t } = useI18n();
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const normalizedColorScheme = normalizeColorScheme(colorScheme);
+    const themeColors = Colors[normalizedColorScheme];
     const [history, setHistory] = useState<HistoryItem[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [isDeleting, setIsDeleting] = useState(false);
@@ -180,7 +184,7 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('history.title') || 'History'}
                 onBack={goBack || onClose}
@@ -196,7 +200,7 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'delete-last-15',
                                 icon: 'clock-outline',
-                                iconColor: themeStyles.colors.iconStorage,
+                                iconColor: themeColors.iconStorage,
                                 title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes',
                                 subtitle: t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries',
                                 onPress: handleDeleteLast15Minutes,
@@ -205,7 +209,7 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'clear-all',
                                 icon: 'delete-outline',
-                                iconColor: themeStyles.colors.iconSharing,
+                                iconColor: themeColors.iconSharing,
                                 title: t('history.clearAll.title') || 'Clear All History',
                                 subtitle: t('history.clearAll.subtitle') || 'Remove all history entries',
                                 onPress: handleClearAll,
@@ -221,19 +225,19 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
                     {isLoading ? (
                         <LoadingState
                             message={t('history.loading') || 'Loading history...'}
-                            color={themeStyles.textColor}
+                            color={bloomTheme.colors.text}
                         />
                     ) : history.length === 0 ? (
                         <EmptyState
                             message={t('history.empty') || 'No history yet'}
-                            textColor={themeStyles.textColor}
+                            textColor={bloomTheme.colors.text}
                         />
                     ) : (
                         <GroupedSection
                             items={history.map((item) => ({
                                 id: item.id,
                                 icon: item.type === 'search' ? 'search' : 'globe',
-                                iconColor: item.type === 'search' ? themeStyles.colors.iconSecurity : themeStyles.colors.iconPersonalInfo,
+                                iconColor: item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo,
                                 title: item.query,
                                 subtitle: formatTime(item.timestamp),
                             }))}

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -8,8 +8,7 @@ import {
     Platform,
 } from 'react-native';
 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 { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
@@ -37,10 +36,8 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     // Use useOxy() hook for OxyContext values
     const { user, currentLanguage, setLanguage, oxyServices, isAuthenticated } = useOxy();
     const { t } = useI18n();
-    const colorScheme = useColorScheme();
+    const bloomTheme = useTheme();
     const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
-    const themeColors = themeStyles.colors;
     const [isLoading, setIsLoading] = useState(false);
 
     // Memoize the language select handler to prevent recreation on every render
@@ -111,16 +108,16 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
                 selected: isSelected,
                 onPress: () => handleLanguageSelect(language.id),
                 customContent: isSelected ? (
-                    <Ionicons name="checkmark-circle" size={24} color={themeColors.tint} />
+                    <Ionicons name="checkmark-circle" size={24} color={bloomTheme.colors.primary} />
                 ) : undefined,
             };
         }),
-        [currentLanguage, handleLanguageSelect, themeColors]
+        [currentLanguage, handleLanguageSelect, bloomTheme]
     );
 
 
     return (
-        <View style={[styles.container, { backgroundColor: theme === 'dark' ? '#000000' : '#F5F5F5' }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title=""
                 subtitle=""
@@ -138,11 +135,11 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
             >
                 {/* Big Title */}
                 <View style={styles.titleContainer}>
-                    <Text style={[styles.bigTitle, { color: themeColors.text }]}>
+                    <Text style={[styles.bigTitle, { color: bloomTheme.colors.text }]}>
                         {t('language.title')}
                     </Text>
                     {t('language.subtitle') && (
-                        <Text style={[styles.bigSubtitle, { color: themeColors.secondaryText }]}>
+                        <Text style={[styles.bigSubtitle, { color: bloomTheme.colors.textSecondary }]}>
                             {t('language.subtitle')}
                         </Text>
                     )}
@@ -151,7 +148,7 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
                 {/* Available languages - Main section */}
                 <View style={styles.sectionContainer}>
                     <View style={[styles.materialCard, {
-                        backgroundColor: themeColors.card,
+                        backgroundColor: bloomTheme.colors.card,
                     }]}>
                         <GroupedSection items={languageItems} />
                     </View>

package/src/ui/screens/LearnMoreUsernamesScreen.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
-import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useI18n } from '../hooks/useI18n';
 
 interface InfoSection {
@@ -55,7 +55,7 @@ const INFO_SECTIONS: InfoSection[] = [
 const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
     theme,
 }) => {
-    const themeStyles = useThemeStyles(theme || 'light');
+    const bloomTheme = useTheme();
     const { t } = useI18n();
     const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(['what'])); // Start with first section expanded
 
@@ -71,23 +71,23 @@ const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
         });
     }, []);
 
-    const styles = useMemo(() => createStyles(themeStyles), [themeStyles]);
+    const styles = useMemo(() => createStyles(), []);
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <ScrollView
                 style={styles.content}
                 showsVerticalScrollIndicator={false}
                 contentContainerStyle={styles.contentContainer}
             >
                 <View style={styles.introSection}>
-                    <View style={[styles.introIcon, { backgroundColor: `${themeStyles.primaryColor}15` }]}>
-                        <Ionicons name="at" size={32} color={themeStyles.primaryColor} />
+                    <View style={[styles.introIcon, { backgroundColor: `${bloomTheme.colors.primary}15` }]}>
+                        <Ionicons name="at" size={32} color={bloomTheme.colors.primary} />
                     </View>
-                    <Text style={[styles.introTitle, { color: themeStyles.textColor }]}>
+                    <Text style={[styles.introTitle, { color: bloomTheme.colors.text }]}>
                         {t('learnMoreUsernames.introTitle')}
                     </Text>
-                    <Text style={[styles.introText, { color: themeStyles.mutedTextColor }]}>
+                    <Text style={[styles.introText, { color: bloomTheme.colors.textSecondary }]}>
                         {t('learnMoreUsernames.introText')}
                     </Text>
                 </View>
@@ -100,7 +100,7 @@ const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
                             key={section.id}
                             style={[
                                 styles.section,
-                                { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor: themeStyles.borderColor },
+                                { backgroundColor: bloomTheme.colors.backgroundSecondary, borderColor: bloomTheme.colors.border },
                                 index === 0 && styles.sectionFirst,
                             ]}
                         >
@@ -112,25 +112,25 @@ const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
                                 accessibilityHint={isExpanded ? t('learnMoreUsernames.collapseHint') : t('learnMoreUsernames.expandHint')}
                                 accessibilityState={{ expanded: isExpanded }}
                             >
-                                <View style={[styles.sectionIconContainer, { backgroundColor: `${themeStyles.primaryColor}15` }]}>
+                                <View style={[styles.sectionIconContainer, { backgroundColor: `${bloomTheme.colors.primary}15` }]}>
                                     <Ionicons
                                         name={section.icon}
                                         size={20}
-                                        color={themeStyles.primaryColor}
+                                        color={bloomTheme.colors.primary}
                                     />
                                 </View>
-                                <Text style={[styles.sectionTitle, { color: themeStyles.textColor }]}>
+                                <Text style={[styles.sectionTitle, { color: bloomTheme.colors.text }]}>
                                     {sectionTitle}
                                 </Text>
                                 <Ionicons
                                     name={isExpanded ? 'chevron-up' : 'chevron-down'}
                                     size={20}
-                                    color={themeStyles.mutedTextColor}
+                                    color={bloomTheme.colors.textSecondary}
                                 />
                             </TouchableOpacity>
                             {isExpanded && (
-                                <View style={[styles.sectionContent, { borderTopColor: themeStyles.borderColor }]}>
-                                    <Text style={[styles.sectionText, { color: themeStyles.mutedTextColor }]}>
+                                <View style={[styles.sectionContent, { borderTopColor: bloomTheme.colors.border }]}>
+                                    <Text style={[styles.sectionText, { color: bloomTheme.colors.textSecondary }]}>
                                         {t(section.contentKey)}
                                     </Text>
                                 </View>
@@ -140,7 +140,7 @@ const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
                 })}
 
                 <View style={styles.footer}>
-                    <Text style={[styles.footerText, { color: themeStyles.mutedTextColor }]}>
+                    <Text style={[styles.footerText, { color: bloomTheme.colors.textSecondary }]}>
                         {t('learnMoreUsernames.footer')}
                     </Text>
                 </View>
@@ -149,7 +149,7 @@ const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
     );
 };
 
-const createStyles = (themeStyles: ReturnType<typeof useThemeStyles>) => StyleSheet.create({
+const createStyles = () => StyleSheet.create({
     container: {
         flex: 1,
     },

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -9,8 +9,10 @@ import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
 import { Header, Section, GroupedSection, LoadingState } 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';
 
 const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -20,8 +22,10 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
 }) => {
     const { t } = useI18n();
     const [loading, setLoading] = useState(false);
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const normalizedColorScheme = normalizeColorScheme(colorScheme);
+    const themeColors = Colors[normalizedColorScheme];
 
     // Policy URLs from Oxy Transparency Center
     const POLICY_URLS = {
@@ -91,7 +95,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
     // If a specific document type is requested, show loading state while opening
     if (documentType) {
         return (
-            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <View style={styles.container} className="bg-background">
                 <Header
                     title={getPolicyTitle(documentType)}
                     onBack={goBack || onClose}
@@ -100,7 +104,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                 />
                 <LoadingState
                     message={t('legal.opening') || 'Opening document...'}
-                    color={themeStyles.textColor}
+                    color={bloomTheme.colors.text}
                 />
             </View>
         );
@@ -108,7 +112,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
 
     // Default: show both options
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('legal.title') || 'Legal Documents'}
                 onBack={goBack || onClose}
@@ -123,7 +127,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'privacy-policy',
                                 icon: 'shield-check',
-                                iconColor: themeStyles.colors.iconPersonalInfo,
+                                iconColor: themeColors.iconPersonalInfo,
                                 title: t('legal.privacyPolicy.title') || 'Privacy Policy',
                                 subtitle: t('legal.privacyPolicy.subtitle') || 'How we handle your data',
                                 onPress: handleOpenPolicy('privacy'),
@@ -131,7 +135,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'terms-of-service',
                                 icon: 'file-document',
-                                iconColor: themeStyles.colors.iconSecurity,
+                                iconColor: themeColors.iconSecurity,
                                 title: t('legal.termsOfService.title') || 'Terms of Service',
                                 subtitle: t('legal.termsOfService.subtitle') || 'Terms and conditions of use',
                                 onPress: handleOpenPolicy('terms'),
@@ -139,7 +143,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'community-guidelines',
                                 icon: 'account-group',
-                                iconColor: themeStyles.colors.iconData,
+                                iconColor: themeColors.iconData,
                                 title: t('legal.communityGuidelines.title') || 'Community Guidelines',
                                 subtitle: t('legal.communityGuidelines.subtitle') || 'Rules and expectations for our community',
                                 onPress: handleOpenPolicy('community'),
@@ -147,7 +151,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'data-retention',
                                 icon: 'clock',
-                                iconColor: themeStyles.colors.iconStorage,
+                                iconColor: themeColors.iconStorage,
                                 title: t('legal.dataRetention.title') || 'Data Retention Policy',
                                 subtitle: t('legal.dataRetention.subtitle') || 'How long we keep your data',
                                 onPress: handleOpenPolicy('dataRetention'),
@@ -155,7 +159,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'content-moderation',
                                 icon: 'eye',
-                                iconColor: themeStyles.colors.iconSharing,
+                                iconColor: themeColors.iconSharing,
                                 title: t('legal.contentModeration.title') || 'Content Moderation Policy',
                                 subtitle: t('legal.contentModeration.subtitle') || 'How we moderate content',
                                 onPress: handleOpenPolicy('contentModeration'),

package/src/ui/screens/OxyAuthScreen.tsx

@@ -119,16 +119,6 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
   theme,
 }) => {
   const bloomTheme = useTheme();
-  const colors = {
-    background: bloomTheme.colors.background,
-    text: bloomTheme.colors.text,
-    secondaryText: bloomTheme.colors.textSecondary,
-    primary: bloomTheme.colors.primary,
-    error: bloomTheme.colors.error,
-    border: bloomTheme.colors.border,
-    card: bloomTheme.colors.card,
-    inputBackground: bloomTheme.colors.backgroundSecondary,
-  };
   const { oxyServices, signIn, switchSession } = useOxy();
 
   const [authSession, setAuthSession] = useState<AuthSession | null>(null);
@@ -410,9 +400,9 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
 
   if (isLoading) {
     return (
-      <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={styles.container} className="bg-background">
         <Loading size="large" />
-        <Text style={[styles.loadingText, { color: colors.secondaryText }]}>
+        <Text style={styles.loadingText} className="text-muted-foreground">
           Preparing sign in...
         </Text>
       </View>
@@ -421,8 +411,8 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
 
   if (error) {
     return (
-      <View style={[styles.container, { backgroundColor: colors.background }]}>
-        <Text style={[styles.errorText, { color: colors.error }]}>{error}</Text>
+      <View style={styles.container} className="bg-background">
+        <Text style={styles.errorText} className="text-destructive">{error}</Text>
         <Button variant="primary" onPress={handleRefresh} style={{ width: '100%', borderRadius: 12 }}>
           Try Again
         </Button>
@@ -431,18 +421,18 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <View style={styles.container} className="bg-background">
       {/* Header */}
       <View style={styles.header}>
         <OxyLogo width={48} height={48} />
-        <Text style={[styles.title, { color: colors.text }]}>Sign in with Oxy</Text>
-        <Text style={[styles.subtitle, { color: colors.secondaryText }]}>
+        <Text style={styles.title} className="text-foreground">Sign in with Oxy</Text>
+        <Text style={styles.subtitle} className="text-muted-foreground">
           Use your Oxy identity to sign in securely
         </Text>
       </View>
 
       {/* QR Code */}
-      <View style={[styles.qrContainer, { backgroundColor: colors.inputBackground, borderColor: colors.border }]}>
+      <View style={styles.qrContainer} className="bg-secondary border-border">
         <View style={styles.qrWrapper}>
           <QRCode
             value={getQRData()}
@@ -451,23 +441,23 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
             color="black"
           />
         </View>
-        <Text style={[styles.qrHint, { color: colors.secondaryText }]}>
+        <Text style={styles.qrHint} className="text-muted-foreground">
           Scan with Oxy Accounts app
         </Text>
       </View>
 
       {/* Divider */}
       <View style={styles.dividerContainer}>
-        <View style={[styles.divider, { backgroundColor: colors.border }]} />
-        <Text style={[styles.dividerText, { color: colors.secondaryText }]}>or</Text>
-        <View style={[styles.divider, { backgroundColor: colors.border }]} />
+        <View style={styles.divider} className="bg-border" />
+        <Text style={styles.dividerText} className="text-muted-foreground">or</Text>
+        <View style={styles.divider} className="bg-border" />
       </View>
 
       {/* Open Oxy Auth Button */}
       <Button
         variant="primary"
         onPress={handleOpenAuth}
-        icon={<OxyLogo width={20} height={20} fillColor={colors.card} style={styles.buttonIcon} />}
+        icon={<OxyLogo width={20} height={20} fillColor={bloomTheme.colors.card} style={styles.buttonIcon} />}
         style={{ width: '100%', borderRadius: 12 }}
       >
         Open Oxy Auth
@@ -477,7 +467,7 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
       {isWaiting && (
         <View style={styles.statusContainer}>
           <Loading size="small" style={{ flex: undefined }} />
-          <Text style={[styles.statusText, { color: colors.secondaryText }]}>
+          <Text style={styles.statusText} className="text-muted-foreground">
             Waiting for authorization...
           </Text>
         </View>
@@ -485,11 +475,11 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
 
       {/* Footer */}
       <View style={styles.footer}>
-        <Text style={[styles.footerText, { color: colors.secondaryText }]}>
+        <Text style={styles.footerText} className="text-muted-foreground">
           Don't have Oxy Accounts?{' '}
         </Text>
         <TouchableOpacity onPress={() => Linking.openURL(OXY_ACCOUNTS_WEB_URL)}>
-          <Text style={[styles.footerLink, { color: colors.primary }]}>
+          <Text style={styles.footerLink} className="text-primary">
             Get it here
           </Text>
         </TouchableOpacity>
@@ -498,7 +488,7 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
       {/* Cancel Button */}
       {goBack && (
         <TouchableOpacity style={styles.cancelButton} onPress={goBack}>
-          <Text style={[styles.cancelText, { color: colors.secondaryText }]}>Cancel</Text>
+          <Text style={styles.cancelText} className="text-muted-foreground">Cancel</Text>
         </TouchableOpacity>
       )}
     </View>

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -12,7 +12,6 @@ import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles';
 import { normalizeTheme } from '../utils/themeUtils';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
-import { useThemeStyles } from '../hooks/useThemeStyles';
 import { useI18n } from '../hooks/useI18n';
 import QRCode from 'react-native-qrcode-svg';
 
@@ -80,7 +79,6 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
 
     const normalizedTheme = normalizeTheme(theme);
     const colors = useThemeColors(normalizedTheme);
-    const themeStyles = useThemeStyles(normalizedTheme);
     const { t } = useI18n();
     const styles = useMemo(() => createPaymentStyles(colors), [colors]);
 
@@ -282,7 +280,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
     };
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
                 {renderCurrentStep()}
             </ScrollView>

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -19,9 +19,7 @@ import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
 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 { useOxy } from '../context/OxyContext';
 
 interface SubscriptionPlan {
@@ -84,11 +82,16 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const [currentAppPackage, setCurrentAppPackage] = useState<string>('mention'); // Default to mention for demo
 
     const { t } = useI18n();
-    const colorScheme = useColorScheme();
-    const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    const bloomTheme = useTheme();
     // Extract commonly used colors for readability
-    const { textColor, backgroundColor, secondaryBackgroundColor, borderColor, primaryColor, successColor, dangerColor, isDarkTheme } = themeStyles;
+    const textColor = bloomTheme.colors.text;
+    const backgroundColor = bloomTheme.colors.background;
+    const secondaryBackgroundColor = bloomTheme.colors.backgroundSecondary;
+    const borderColor = bloomTheme.colors.border;
+    const primaryColor = bloomTheme.colors.primary;
+    const successColor = bloomTheme.colors.success;
+    const dangerColor = bloomTheme.colors.error;
+    const isDarkTheme = bloomTheme.isDark;
     const warningColor = '#FF9500';
 
     // TODO: Replace mock data with actual API integration