update darkMode for modal

components/tripInfo/modal/TripCostDetailModal.tsx

@@ -1,5 +1,6 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 import React, { useEffect, useState } from "react";
 import {
   KeyboardAvoidingView,
@@ -11,7 +12,7 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import styles from "./style/TripCostDetailModal.styles";
+import { createStyles } from "./style/TripCostDetailModal.styles";
 
 // ---------------------------
 // 🧩 Interface
@@ -31,6 +32,8 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
   data,
 }) => {
   const { t } = useI18n();
+  const { colors } = useThemeContext();
+  const styles = React.useMemo(() => createStyles(colors), [colors]);
   const [isEditing, setIsEditing] = useState(false);
   const [editableData, setEditableData] = useState<Model.TripCost[]>(data);