update theme dark, light mode

components/tripInfo/TripCostTable.tsx

@@ -1,14 +1,12 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useI18n } from "@/hooks/use-i18n";
+import { useAppTheme } from "@/hooks/use-app-theme";
 import { useTrip } from "@/state/use-trip";
-import React, { useRef, useState } from "react";
-import { Animated, Text, TouchableOpacity, View } from "react-native";
+import { createTableStyles } from "./style/createTableStyles";
 import TripCostDetailModal from "./modal/TripCostDetailModal";
-import styles from "./style/TripCostTable.styles";
-
-// ---------------------------
-// 💰 Component chính
-// ---------------------------
+import React, { useRef, useState, useMemo } from "react";
+import { Animated, Text, TouchableOpacity, View } from "react-native";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 const TripCostTable: React.FC = () => {
   const [collapsed, setCollapsed] = useState(true);
@@ -16,9 +14,13 @@ const TripCostTable: React.FC = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const animatedHeight = useRef(new Animated.Value(0)).current;
   const { t } = useI18n();
+  const { colorScheme } = useAppTheme();
+  const { colors } = useThemeContext();
 
   const { trip } = useTrip();
 
+  const styles = useMemo(() => createTableStyles(colorScheme), [colorScheme]);
+
   const data: Model.TripCost[] = trip?.trip_cost ?? [];
   const tongCong = data.reduce((sum, item) => sum + item.total_cost, 0);
 
@@ -54,19 +56,14 @@ const TripCostTable: React.FC = () => {
       >
         <Text style={styles.title}>{t("trip.costTable.title")}</Text>
         {collapsed && (
-          <Text
-            style={[
-              styles.title,
-              { color: "#ff6600", fontWeight: "bold", marginLeft: 8 },
-            ]}
-          >
+          <Text style={[styles.totalCollapsed]}>
             {tongCong.toLocaleString()}
           </Text>
         )}
         <IconSymbol
           name={collapsed ? "chevron.down" : "chevron.up"}
           size={15}
-          color="#000000"
+          color={colors.icon}
         />
       </TouchableOpacity>