Update color for dark mode

src/navigation/AppNavigator.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useColorScheme } from 'react-native';
-import { COLORS } from '../theme';
+import { COLORS, FONT_SIZE, useTheme } from '../theme';
 import { CustomTabBar } from './CustomTabBar';
 import { useAuthStore } from '../stores/authStore';
 import {
@@ -42,8 +42,12 @@ const AccStack = createNativeStackNavigator<AccountStackParamList>();
 // ─── Marketplace (always public) ─────────────────────────────────────────────
 
 function MarketplaceNavigator() {
+  const { theme } = useTheme();
   return (
-    <MktStack.Navigator>
+    <MktStack.Navigator screenOptions={{
+      headerStyle:{backgroundColor: theme.bg},
+      headerTitleStyle: { color: theme.text, fontSize: FONT_SIZE.xxl, fontWeight: 'bold' },
+    }}>
       <MktStack.Screen name="MarketplaceList" component={MarketplaceScreen} options={{ title: 'Marketplace' }} />
       <MktStack.Screen name="MarketplaceDetail" component={ChatbotDetailScreen} options={{ title: 'Chatbot Details' }} />
       <MktStack.Screen

src/navigation/CustomTabBar.tsx

@@ -67,7 +67,7 @@ function TabItem({
   isFocused: boolean;
   onPress: () => void;
 }) {
-  const { theme } = useTheme();
+  const { theme, isDark } = useTheme();
   const scale = useRef(new Animated.Value(1)).current;
   const bgOpacity = useRef(new Animated.Value(isFocused ? 1 : 0)).current;
 
@@ -94,7 +94,7 @@ function TabItem({
     <TouchableWithoutFeedback onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut}>
       <Animated.View style={[styles.tabItem, { transform: [{ scale }] }]}>
         <Animated.View style={[styles.pill, { backgroundColor: pillBg }]}>
-          <Text style={[styles.icon, { opacity: isFocused ? 1 : 0.45 }]}>{icon}</Text>
+          <Text style={[ isDark ? styles.iconDark : styles.iconLight, { opacity: isFocused ? 1 : 0.45 }]}>{icon}</Text>
           <Text
             style={[
               styles.label,
@@ -155,6 +155,7 @@ const styles = StyleSheet.create({
     width: '100%',
     gap: 3,
   },
-  icon: { fontSize: 22 },
+  iconDark: { fontSize: 22, color: COLORS.white },
+  iconLight: { fontSize: 22, color: COLORS.primaryDark },
   label: { fontSize: FONT_SIZE.xs, letterSpacing: 0.2 },
 });

src/screens/marketplace/MarketplaceScreen.tsx

@@ -70,6 +70,7 @@ export function MarketplaceScreen({ navigation }: Props) {
         )}
       </View>
 
+      {/* Chatbots List */}
       {isLoading ? (
         <Spinner centered label="Loading marketplace..." />
       ) : (

src/services/api.ts

@@ -19,7 +19,7 @@ api.interceptors.request.use(config => {
     config.headers.Authorization = `Bearer ${token}`;
   }
   return config;
-});
+}); 
 
 api.interceptors.response.use(
   response => response,