@oxyhq/services 6.9.25 → 6.9.27

package/src/ui/components/BottomSheetRouter.tsx

@@ -4,8 +4,7 @@ import { useStore } from 'zustand';
 import type { RouteName } from '../navigation/routes';
 import { getScreenComponent, isValidRoute } from '../navigation/routes';
 import type { BaseScreenProps } from '../types/navigation';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { Colors } from '../constants/theme';
+import { useTheme } from '@oxyhq/bloom/theme';
 import BottomSheet, { type BottomSheetRef } from './BottomSheet';
 import {
     bottomSheetStore,
@@ -65,7 +64,7 @@ class ScreenErrorBoundary extends React.Component<
 const errorStyles = StyleSheet.create({
     container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
     title: { fontSize: 16, fontWeight: '600', marginBottom: 8 },
-    message: { fontSize: 13, color: '#888', textAlign: 'center' },
+    message: { fontSize: 13, textAlign: 'center' },
 });
 
 export interface BottomSheetRouterProps {
@@ -78,8 +77,7 @@ export interface BottomSheetRouterProps {
  */
 const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, onDismiss }) => {
     const sheetRef = useRef<BottomSheetRef>(null);
-    const colorScheme = useColorScheme();
-    const colors = Colors[colorScheme ?? 'light'];
+    const theme = useTheme();
     const prevScreenRef = useRef<RouteName | null>(null);
 
     const { currentScreen, screenProps, currentStep, isOpen } = useStore(bottomSheetStore);
@@ -190,9 +188,9 @@ const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, o
 
     const renderBackground = useCallback(
         (props: { style?: StyleProp<ViewStyle> }) => (
-            <View style={[styles.background, { backgroundColor: colors.background }, props.style]} />
+            <View style={[styles.background, { backgroundColor: theme.colors.background }, props.style]} />
         ),
-        [colors.background]
+        [theme.colors.background]
     );
 
     const screenPropsValue = useMemo((): BaseScreenProps & { scrollTo: typeof scrollTo } => {
@@ -202,14 +200,14 @@ const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, o
             goBack: handleGoBack,
             onClose: closeBottomSheet,
             onAuthenticated: closeBottomSheet,
-            theme: colorScheme ?? 'light',
+            theme: theme.mode,
             currentScreen: currentScreen ?? undefined,
             initialStep: currentStep ?? (screenProps?.initialStep as number | undefined),
             onStepChange: handleStepChange,
             scrollTo,
             ...rest,
         };
-    }, [navigate, handleGoBack, colorScheme, currentScreen, currentStep, screenProps, handleStepChange, scrollTo]);
+    }, [navigate, handleGoBack, theme.mode, currentScreen, currentStep, screenProps, handleStepChange, scrollTo]);
 
     return (
         <BottomSheet

package/src/ui/components/Header.tsx

@@ -14,9 +14,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import OxyIcon from './icon/OxyIcon';
 import { fontFamilies } from '../styles/fonts';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { normalizeColorScheme } from '../utils/themeUtils';
-import { Colors } from '../constants/theme';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 // Calculate header height based on platform and variant
 export const getHeaderHeight = (variant: HeaderProps['variant'] = 'default', safeAreaTop = 0): number => {
@@ -77,10 +75,9 @@ const Header: React.FC<HeaderProps> = ({
     titleAlignment = 'left',
     scrollY,
 }) => {
-    // Use theme colors directly from Colors constant (like Accounts sidebar)
-    // Ensure colorScheme is always 'light' or 'dark' with proper fallback chain
-    const colorScheme = normalizeColorScheme(useColorScheme(), theme);
-    const colors = Colors[colorScheme];
+    const bloomTheme = useTheme();
+    const colors = bloomTheme.colors;
+    const colorScheme = bloomTheme.mode;
     const insets = useSafeAreaInsets();
     const headerHeight = getHeaderHeight(variant, insets.top);
 
@@ -168,12 +165,12 @@ const Header: React.FC<HeaderProps> = ({
             >
                 {action.loading ? (
                     <View style={styles.loadingContainer}>
-                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.tint }]} />
-                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.tint }]} />
-                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.tint }]} />
+                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? colors.card : colors.tint }]} />
+                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? colors.card : colors.tint }]} />
+                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? colors.card : colors.tint }]} />
                     </View>
                 ) : isTextAction ? (
-                    <Text style={[styles.actionText, { color: '#FFFFFF' }]}>
+                    <Text style={[styles.actionText, { color: colors.card }]}>
                         {action.text}
                     </Text>
                 ) : (
@@ -247,7 +244,7 @@ const Header: React.FC<HeaderProps> = ({
                     {title}
                 </Text>
                 {subtitle ? (
-                    <Text style={[subtitleStyle, { color: colors.secondaryText }]}>
+                    <Text style={[subtitleStyle, { color: colors.textSecondary }]}>
                         {subtitle}
                     </Text>
                 ) : null}

package/src/ui/components/SignInModal.tsx

@@ -17,7 +17,6 @@ import {
     StyleSheet,
     Modal,
     Dimensions,
-    ActivityIndicator,
     Platform,
     Linking,
 } from 'react-native';
@@ -30,7 +29,9 @@ import Animated, {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import io, { type Socket } from 'socket.io-client';
 import QRCode from 'react-native-qrcode-svg';
-import { useThemeColors } from '../hooks/useThemeColors';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { Button } from '@oxyhq/bloom/button';
+import { Loading } from '@oxyhq/bloom/loading';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
 import { createDebugLogger } from '@oxyhq/core';
@@ -91,7 +92,7 @@ const SignInModal: React.FC = () => {
     const [isWaiting, setIsWaiting] = useState(false);
 
     const insets = useSafeAreaInsets();
-    const colors = useThemeColors();
+    const theme = useTheme();
     const { oxyServices, switchSession } = useOxy();
 
     const socketRef = useRef<Socket | null>(null);
@@ -345,7 +346,7 @@ const SignInModal: React.FC = () => {
 
     return (
         <Modal visible={visible} transparent animationType="none" statusBarTranslucent onRequestClose={handleClose}>
-            <Animated.View style={[styles.backdrop, backdropStyle]}>
+            <Animated.View style={[styles.backdrop, { backgroundColor: theme.colors.overlay }, backdropStyle]}>
                 <TouchableOpacity style={StyleSheet.absoluteFill} onPress={handleClose} activeOpacity={1} />
 
                 <Animated.View style={[styles.content, contentStyle, { paddingTop: insets.top + 20, paddingBottom: insets.bottom + 20 }]}>
@@ -357,28 +358,23 @@ const SignInModal: React.FC = () => {
                     {/* Header */}
                     <View style={styles.header}>
                         <OxyLogo width={56} height={56} />
-                        <Text style={[styles.title, { color: colors.text }]}>Sign in with Oxy</Text>
-                        <Text style={[styles.subtitle, { color: colors.secondaryText }]}>
+                        <Text style={[styles.title, { color: theme.colors.text }]}>Sign in with Oxy</Text>
+                        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
                             Scan with Oxy Accounts app or use the button below
                         </Text>
                     </View>
 
                     {isLoading ? (
                         <View style={styles.loadingContainer}>
-                            <ActivityIndicator size="large" color={colors.tint} />
-                            <Text style={[styles.loadingText, { color: colors.secondaryText }]}>
+                            <Loading size="large" />
+                            <Text style={[styles.loadingText, { color: theme.colors.textSecondary }]}>
                                 Preparing sign in...
                             </Text>
                         </View>
                     ) : error ? (
                         <View style={styles.errorContainer}>
-                            <Text style={[styles.errorText, { color: '#EA4335' }]}>{error}</Text>
-                            <TouchableOpacity
-                                style={[styles.button, { backgroundColor: colors.tint }]}
-                                onPress={handleRefresh}
-                            >
-                                <Text style={styles.buttonText}>Try Again</Text>
-                            </TouchableOpacity>
+                            <Text style={[styles.errorText, { color: theme.colors.error }]}>{error}</Text>
+                            <Button onPress={handleRefresh}>Try Again</Button>
                         </View>
                     ) : (
                         <>
@@ -392,7 +388,7 @@ const SignInModal: React.FC = () => {
                                         color="black"
                                     />
                                 ) : (
-                                    <ActivityIndicator size="large" color="#d169e5" />
+                                    <Loading size="large" />
                                 )}
                             </View>
 
@@ -404,18 +400,17 @@ const SignInModal: React.FC = () => {
                             </View>
 
                             {/* Open Auth Popup Button */}
-                            <TouchableOpacity
-                                style={[styles.button, { backgroundColor: '#d169e5' }]}
+                            <Button
                                 onPress={handleOpenAuthPopup}
+                                icon={<OxyLogo width={20} height={20} fillColor={theme.colors.card} />}
                             >
-                                <OxyLogo width={20} height={20} fillColor="white" style={styles.buttonIcon} />
-                                <Text style={styles.buttonText}>Open Oxy Auth</Text>
-                            </TouchableOpacity>
+                                Open Oxy Auth
+                            </Button>
 
                             {/* Status */}
                             {isWaiting && (
                                 <View style={styles.statusContainer}>
-                                    <ActivityIndicator size="small" color="white" />
+                                    <Loading size="small" />
                                     <Text style={styles.statusText}>
                                         Waiting for authorization...
                                     </Text>
@@ -432,7 +427,6 @@ const SignInModal: React.FC = () => {
 const styles = StyleSheet.create({
     backdrop: {
         flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.85)',
         justifyContent: 'center',
         alignItems: 'center',
     },
@@ -494,23 +488,6 @@ const styles = StyleSheet.create({
         marginHorizontal: 16,
         fontSize: 14,
     },
-    button: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 16,
-        paddingHorizontal: 24,
-        borderRadius: 12,
-        width: '100%',
-    },
-    buttonIcon: {
-        marginRight: 10,
-    },
-    buttonText: {
-        color: 'white',
-        fontSize: 16,
-        fontWeight: '600',
-    },
     statusContainer: {
         flexDirection: 'row',
         alignItems: 'center',

package/src/ui/components/StepBasedScreen.tsx

@@ -11,8 +11,9 @@ import Animated, {
     useAnimatedStyle,
     withTiming,
 } from 'react-native-reanimated';
-import { useThemeColors, createAuthStyles } from '../styles';
-import type { ThemeColors } from '../styles';
+import { useTheme } from '@oxyhq/bloom/theme';
+import type { ThemeColors } from '@oxyhq/bloom/theme';
+import { createAuthStyles } from '../styles';
 import { fontFamilies } from '../styles/fonts';
 import type { BaseScreenProps, StepController } from '../types/navigation';
 import type { RouteName } from '../types/navigation';
@@ -136,13 +137,25 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
     // ========================================================================
     // Computed Values
     // ========================================================================
-    // Narrow theme type with default value
-    const themeValue = (theme === 'light' || theme === 'dark') ? theme : 'light';
-    const themeString = typeof theme === 'string' ? theme : 'light';
-    const colors = useThemeColors(themeValue);
+    const bloomTheme = useTheme();
+    const colors = bloomTheme.colors;
+    const themeString = bloomTheme.mode;
+    // Map bloom theme colors to AuthThemeColors shape for createAuthStyles
+    const authColors = useMemo(() => ({
+        text: colors.text,
+        background: colors.background,
+        inputBackground: colors.backgroundSecondary,
+        placeholder: colors.textTertiary,
+        primary: colors.primary,
+        border: colors.border,
+        error: colors.error,
+        success: colors.success,
+        warning: colors.warning,
+        secondaryText: colors.textSecondary,
+    }), [colors]);
     const insets = useSafeAreaInsets();
     const styles = useMemo(() => ({
-        ...createAuthStyles(colors, themeString),
+        ...createAuthStyles(authColors, themeString),
         // Additional styles for step components
         modernHeader: {
             alignItems: 'flex-start' as const,
@@ -189,7 +202,7 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             }),
         },
         buttonText: {
-            color: '#FFFFFF',
+            color: colors.card,
             fontSize: 16,
             fontWeight: '600' as const,
             letterSpacing: 0.5,
@@ -223,7 +236,7 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             marginHorizontal: 3,
             backgroundColor: colors.border,
         },
-    }), [colors, themeString]);
+    }), [authColors, colors, themeString]);
 
     // ========================================================================
     // Animation Values (removed - router handles animations now)

package/src/ui/components/feedback/feedbackStyles.ts

@@ -130,7 +130,7 @@ export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.creat
         }),
     },
     buttonText: {
-        color: '#FFFFFF',
+        color: colors.background,
         fontSize: 16,
         fontWeight: '600',
         letterSpacing: 0.5,
@@ -193,7 +193,7 @@ export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.creat
         borderRadius: 5,
         marginHorizontal: 6,
         borderWidth: 2,
-        borderColor: '#fff',
+        borderColor: colors.background,
         ...Platform.select({
             web: {
                 boxShadow: '0 1px 2px rgba(0,0,0,0.08)',

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

@@ -7,25 +7,18 @@ import {
     TouchableOpacity,
     StyleSheet,
     Modal,
-    ActivityIndicator,
     KeyboardAvoidingView,
     Platform,
 } from 'react-native';
 import OxyIcon from '../icon/OxyIcon';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { Loading } from '@oxyhq/bloom/loading';
 
 interface DeleteAccountModalProps {
     visible: boolean;
     username: string;
     onClose: () => void;
     onDelete: (password: string) => Promise<void>;
-    colors: {
-        background: string;
-        text: string;
-        secondaryText: string;
-        border: string;
-        danger: string;
-        inputBackground: string;
-    };
     t: (key: string, params?: Record<string, string>) => string | undefined;
 }
 
@@ -34,9 +27,9 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
     username,
     onClose,
     onDelete,
-    colors,
     t,
 }) => {
+    const theme = useTheme();
     const [password, setPassword] = useState('');
     const [confirmUsername, setConfirmUsername] = useState('');
     const [isDeleting, setIsDeleting] = useState(false);
@@ -81,41 +74,41 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                 style={styles.overlay}
             >
                 <TouchableOpacity
-                    style={styles.backdrop}
+                    style={[styles.backdrop, { backgroundColor: theme.colors.overlay }]}
                     activeOpacity={1}
                     onPress={handleClose}
                 />
-                <View style={[styles.modal, { backgroundColor: colors.background }]}>
+                <View style={[styles.modal, { backgroundColor: theme.colors.background }]}>
                     <View style={styles.header}>
-                        <OxyIcon name="alert" size={32} color={colors.danger} />
-                        <Text style={[styles.title, { color: colors.danger }]}>
+                        <OxyIcon name="alert" size={32} color={theme.colors.error} />
+                        <Text style={[styles.title, { color: theme.colors.error }]}>
                             {t('deleteAccount.title') || 'Delete Account'}
                         </Text>
                     </View>
 
-                    <Text style={[styles.warning, { color: colors.text }]}>
+                    <Text style={[styles.warning, { color: theme.colors.text }]}>
                         {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: `${colors.danger}20` }]}>
-                            <Text style={[styles.errorText, { color: colors.danger }]}>
+                        <View style={[styles.errorContainer, { backgroundColor: `${theme.colors.error}20` }]}>
+                            <Text style={[styles.errorText, { color: theme.colors.error }]}>
                                 {error}
                             </Text>
                         </View>
                     )}
 
                     <View style={styles.inputGroup}>
-                        <Text style={[styles.label, { color: colors.secondaryText }]}>
+                        <Text style={[styles.label, { color: theme.colors.textSecondary }]}>
                             {t('deleteAccount.passwordLabel') || 'Enter your password'}
                         </Text>
-                        <View style={[styles.inputContainer, { borderColor: colors.border, backgroundColor: colors.inputBackground }]}>
+                        <View style={[styles.inputContainer, { borderColor: theme.colors.border, backgroundColor: theme.colors.background }]}>
                             <TextInput
-                                style={[styles.input, { color: colors.text }]}
+                                style={[styles.input, { color: theme.colors.text }]}
                                 value={password}
                                 onChangeText={setPassword}
                                 placeholder={t('deleteAccount.passwordPlaceholder') || 'Password'}
-                                placeholderTextColor={colors.secondaryText}
+                                placeholderTextColor={theme.colors.textSecondary}
                                 secureTextEntry={!showPassword}
                                 autoCapitalize="none"
                                 editable={!isDeleting}
@@ -127,14 +120,14 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                                 <OxyIcon
                                     name={showPassword ? 'eye-off' : 'eye'}
                                     size={20}
-                                    color={colors.secondaryText}
+                                    color={theme.colors.textSecondary}
                                 />
                             </TouchableOpacity>
                         </View>
                     </View>
 
                     <View style={styles.inputGroup}>
-                        <Text style={[styles.label, { color: colors.secondaryText }]}>
+                        <Text style={[styles.label, { color: theme.colors.textSecondary }]}>
                             {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
                         </Text>
                         <TextInput
@@ -142,15 +135,15 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                                 styles.input,
                                 styles.confirmInput,
                                 {
-                                    borderColor: confirmUsername === username ? '#34C759' : colors.border,
-                                    backgroundColor: colors.inputBackground,
-                                    color: colors.text,
+                                    borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
+                                    backgroundColor: theme.colors.background,
+                                    color: theme.colors.text,
                                 },
                             ]}
                             value={confirmUsername}
                             onChangeText={setConfirmUsername}
                             placeholder={username}
-                            placeholderTextColor={colors.secondaryText}
+                            placeholderTextColor={theme.colors.textSecondary}
                             autoCapitalize="none"
                             autoCorrect={false}
                             editable={!isDeleting}
@@ -159,11 +152,11 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
 
                     <View style={styles.buttons}>
                         <TouchableOpacity
-                            style={[styles.button, styles.cancelButton, { borderColor: colors.border }]}
+                            style={[styles.button, styles.cancelButton, { borderColor: theme.colors.border }]}
                             onPress={handleClose}
                             disabled={isDeleting}
                         >
-                            <Text style={[styles.buttonText, { color: colors.text }]}>
+                            <Text style={[styles.buttonText, { color: theme.colors.text }]}>
                                 {t('common.cancel') || 'Cancel'}
                             </Text>
                         </TouchableOpacity>
@@ -172,15 +165,15 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                             style={[
                                 styles.button,
                                 styles.deleteButton,
-                                { backgroundColor: isValid ? colors.danger : `${colors.danger}50` },
+                                { backgroundColor: isValid ? theme.colors.error : `${theme.colors.error}50` },
                             ]}
                             onPress={handleDelete}
                             disabled={!isValid || isDeleting}
                         >
                             {isDeleting ? (
-                                <ActivityIndicator color="#fff" size="small" />
+                                <Loading size="small" />
                             ) : (
-                                <Text style={styles.deleteButtonText}>
+                                <Text style={[styles.deleteButtonText, { color: theme.colors.card }]}>
                                     {t('deleteAccount.confirm') || 'Delete Forever'}
                                 </Text>
                             )}
@@ -200,7 +193,6 @@ const styles = StyleSheet.create({
     },
     backdrop: {
         ...StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
     },
     modal: {
         width: '90%',
@@ -288,7 +280,6 @@ const styles = StyleSheet.create({
     deleteButtonText: {
         fontSize: 16,
         fontWeight: '600',
-        color: '#fff',
     },
 });
 

package/src/ui/components/payment/paymentStyles.ts

@@ -34,12 +34,12 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     errorText: {
         fontSize: 18,
-        color: 'red',
+        color: colors.error ?? '#EF4444',
         marginBottom: 24,
     },
     // Summary card styles
     summaryCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,
@@ -131,7 +131,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     // Card payment styles
     cardPaymentCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,
@@ -200,7 +200,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     // Oxy Pay styles
     oxyPayCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,
@@ -247,7 +247,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     // FairCoin styles
     faircoinCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,
@@ -358,7 +358,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     // Success styles
     successCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,

package/src/ui/components/payment/types.ts

@@ -41,5 +41,7 @@ export interface PaymentColors {
     secondaryText: string;
     border: string;
     success?: string;
+    error?: string;
     background?: string;
+    card?: string;
 }

package/src/ui/constants/theme.ts

@@ -1,6 +1,7 @@
 /**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ * Below are the colors that are used in the app.
+ * These are kept as a compatibility layer — prefer using bloom's useTheme() / useThemeColor()
+ * directly in new code. Existing screens still reference Colors.light / Colors.dark.
  */
 
 import { Platform } from 'react-native';

package/src/ui/hooks/useAuth.ts

@@ -110,7 +110,10 @@ export function useAuth(): UseAuthReturn {
     // Check if we're on the identity provider itself
     // Only the IdP has local login forms - other apps are client apps
     const authWebUrl = oxyServices.config?.authWebUrl;
-    const idpHostname = authWebUrl ? new URL(authWebUrl).hostname : 'auth.oxy.so';
+    let idpHostname = 'auth.oxy.so';
+    if (authWebUrl) {
+      try { idpHostname = new URL(authWebUrl).hostname; } catch { /* malformed URL, use default */ }
+    }
     const isIdentityProvider = isWebBrowser() &&
       window.location.hostname === idpHostname;
 

package/src/ui/hooks/useThemeColors.ts

@@ -1,26 +1,27 @@
 import { useMemo } from 'react';
-import { useColorScheme } from './useColorScheme';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { Colors } from '../constants/theme';
 
 /**
- * Reusable hook to get theme colors based on current color scheme
- * Returns the Colors object for the current theme (light or dark)
- * 
- * @returns Colors object for the current color scheme
- * 
- * @example
- * ```tsx
- * const colors = useThemeColors();
- * <View style={{ backgroundColor: colors.background }}>
- *   <Text style={{ color: colors.text }}>Hello</Text>
- * </View>
- * ```
+ * Returns theme colors based on current color scheme.
+ * Delegates to bloom's useTheme() and maps to the Colors shape
+ * for backward compatibility with existing screens.
  */
 export const useThemeColors = () => {
-  const colorScheme = useColorScheme();
-  
+  const theme = useTheme();
+
   return useMemo(() => {
-    return Colors[colorScheme ?? 'light'];
-  }, [colorScheme]);
+    const base = Colors[theme.isDark ? 'dark' : 'light'];
+    // Merge bloom colors over the local constants so bloom's
+    // dynamic colors (from scoped CSS vars) take precedence.
+    return {
+      ...base,
+      background: theme.colors.background,
+      text: theme.colors.text,
+      border: theme.colors.border,
+      tint: theme.colors.primary,
+      card: theme.colors.card,
+      primary: theme.colors.primary,
+    };
+  }, [theme]);
 };
-