update darkMode for modal

2025-11-21 08:50:07 +07:00
parent 51327c7d01
commit 6975358a7f
8 changed files with 750 additions and 766 deletions
--- a/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
+++ b/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
@@ -3,6 +3,7 @@ import { IconSymbol } from "@/components/ui/icon-symbol";
 import { queryGpsData } from "@/controller/DeviceController";
 import { queryUpdateFishingLogs } from "@/controller/TripController";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 import { showErrorToast, showSuccessToast } from "@/services/toast_service";
 import { useFishes } from "@/state/use-fish";
 import { useTrip } from "@/state/use-trip";
@@ -21,7 +22,7 @@ import {
 } from "react-native";
 import { z } from "zod";
 import { InfoSection } from "./components/InfoSection";
-import styles from "./style/CreateOrUpdateHaulModal.styles";
+import { createStyles } from "./style/CreateOrUpdateHaulModal.styles";

 interface CreateOrUpdateHaulModalProps {
  isVisible: boolean;
@@ -74,6 +75,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
  fishingLog,
  fishingLogIndex,
 }) => {
+  const { colors } = useThemeContext();
+  const styles = React.useMemo(() => createStyles(colors), [colors]);
  const { t } = useI18n();
  const [isCreateMode, setIsCreateMode] = React.useState(!fishingLog?.info);
  const [isEditing, setIsEditing] = React.useState(false);
@@ -256,7 +259,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
            <TouchableOpacity
              onPress={() => remove(index)}
              style={{
-                backgroundColor: "#FF3B30",
+                backgroundColor: colors.error,
                borderRadius: 8,
                width: 40,
                height: 40,
@@ -277,7 +280,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
          <TouchableOpacity
            onPress={() => handleToggleExpanded(index)}
            style={{
-              backgroundColor: "#007AFF",
+              backgroundColor: colors.primary,
              borderRadius: 8,
              width: 40,
              height: 40,
--- a/components/tripInfo/modal/CrewDetailModal.tsx
+++ b/components/tripInfo/modal/CrewDetailModal.tsx
@@ -1,8 +1,9 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 import React from "react";
 import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
-import styles from "./style/CrewDetailModal.styles";
+import { createStyles } from "./style/CrewDetailModal.styles";

 // ---------------------------
 // 🧩 Interface
@@ -23,6 +24,8 @@ const CrewDetailModal: React.FC<CrewDetailModalProps> = ({
  crewData,
 }) => {
  const { t } = useI18n();
+  const { colors } = useThemeContext();
+  const styles = React.useMemo(() => createStyles(colors), [colors]);

  if (!crewData) return null;

--- a/components/tripInfo/modal/TripCostDetailModal.tsx
+++ b/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);

--- a/components/tripInfo/modal/components/InfoSection.tsx
+++ b/components/tripInfo/modal/components/InfoSection.tsx
@@ -1,4 +1,5 @@
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";

@@ -12,6 +13,9 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
  stt,
 }) => {
  const { t } = useI18n();
+  const { colors } = useThemeContext();
+  const styles = React.useMemo(() => createStyles(colors), [colors]);
+  
  if (!fishingLog) {
    return null;
  }
@@ -41,22 +45,6 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
          ? new Date(fishingLog.end_at).toLocaleString()
          : "-",
    },
-    // {
-    //   label: "Vị trí hạ thu",
-    //   value: fishingLog.viTriHaThu || "Chưa cập nhật",
-    // },
-    // {
-    //   label: "Vị trí thu lưới",
-    //   value: fishingLog.viTriThuLuoi || "Chưa cập nhật",
-    // },
-    // {
-    //   label: "Độ sâu hạ thu",
-    //   value: fishingLog.doSauHaThu || "Chưa cập nhật",
-    // },
-    // {
-    //   label: "Độ sâu thu lưới",
-    //   value: fishingLog.doSauThuLuoi || "Chưa cập nhật",
-    // },
  ];

  return (
@@ -68,21 +56,12 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
            <View
              style={[
                styles.statusBadge,
-                item.value === "Đã hoàn thành"
+                item.value === t("trip.infoSection.statusCompleted")
                  ? styles.statusBadgeCompleted
                  : styles.statusBadgeInProgress,
              ]}
            >
-              <Text
-                style={[
-                  styles.statusBadgeText,
-                  item.value === "Đã hoàn thành"
-                    ? styles.statusBadgeTextCompleted
-                    : styles.statusBadgeTextInProgress,
-                ]}
-              >
-                {item.value}
-              </Text>
+              <Text style={styles.statusBadgeText}>{item.value}</Text>
            </View>
          ) : (
            <Text style={styles.infoValue}>{item.value}</Text>
@@ -93,53 +72,48 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
  );
 };

-const styles = StyleSheet.create({
-  infoCard: {
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 12,
-    backgroundColor: "#f9f9f9",
-  },
-  infoRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 8,
-  },
-  infoLabel: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#333",
-  },
-  infoValue: {
-    fontSize: 16,
-    color: "#555",
-    paddingVertical: 8,
-  },
-  statusBadge: {
-    paddingVertical: 4,
-    paddingHorizontal: 12,
-    borderRadius: 12,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  statusBadgeCompleted: {
-    backgroundColor: "#34C759",
-  },
-  statusBadgeInProgress: {
-    backgroundColor: "#FF9500",
-  },
-  statusBadgeText: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#fff",
-  },
-  statusBadgeTextCompleted: {
-    color: "#fff",
-  },
-  statusBadgeTextInProgress: {
-    color: "#fff",
-  },
-});
+const createStyles = (colors: any) =>
+  StyleSheet.create({
+    infoCard: {
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 8,
+      padding: 12,
+      marginBottom: 12,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    infoRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 8,
+    },
+    infoLabel: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: colors.textSecondary,
+    },
+    infoValue: {
+      fontSize: 16,
+      color: colors.text,
+      paddingVertical: 8,
+    },
+    statusBadge: {
+      paddingVertical: 4,
+      paddingHorizontal: 12,
+      borderRadius: 12,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    statusBadgeCompleted: {
+      backgroundColor: colors.success,
+    },
+    statusBadgeInProgress: {
+      backgroundColor: colors.warning,
+    },
+    statusBadgeText: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: "#fff",
+    },
+  });
--- a/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
+++ b/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
@@ -1,179 +1,179 @@
+import { Colors } from "@/constants/theme";
 import { StyleSheet } from "react-native";

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#f5f5f5",
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 20,
-    paddingTop: 30,
-    paddingBottom: 16,
-    backgroundColor: "#fff",
-    borderBottomWidth: 1,
-    borderBottomColor: "#eee",
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: "700",
-    color: "#000",
-    flex: 1,
-  },
-  headerButtons: {
-    flexDirection: "row",
-    gap: 12,
-    alignItems: "center",
-  },
-  closeButton: {
-    padding: 4,
-  },
-  closeIconButton: {
-    backgroundColor: "#FF3B30",
-    borderRadius: 10,
-    padding: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  saveButton: {
-    backgroundColor: "#007bff",
-    borderRadius: 8,
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  saveButtonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-    marginBottom: 15,
-  },
-  fishCard: {
-    backgroundColor: "#fff",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 30,
+      paddingBottom: 16,
+      backgroundColor: colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: "700",
+      color: colors.text,
+      flex: 1,
+    },
+    headerButtons: {
+      flexDirection: "row",
+      gap: 12,
+      alignItems: "center",
+    },
+    closeButton: {
+      padding: 4,
+    },
+    closeIconButton: {
+      backgroundColor: colors.error,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    saveButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    saveButtonText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    content: {
+      flex: 1,
+      padding: 16,
+      marginBottom: 15,
+    },
+    fishCard: {
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 16,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },

-  fishCardHeaderContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  fishCardTitle: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: "#000",
-  },
-  fishCardSubtitle: {
-    fontSize: 15,
-    color: "#ff6600",
-    fontWeight: "500",
-  },
-  fieldGroup: {
-    marginBottom: 14,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#333",
-    marginBottom: 6,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontSize: 16,
-    backgroundColor: "#fff",
-    color: "#000",
-  },
-  inputDisabled: {
-    backgroundColor: "#f5f5f5",
-    color: "#999",
-    borderColor: "#eee",
-  },
-  errorText: {
-    color: "#dc3545",
-    fontSize: 12,
-    marginTop: 4,
-    fontWeight: "500",
-  },
-  buttonRow: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    gap: 8,
-    marginTop: 12,
-  },
-  removeButton: {
-    backgroundColor: "#dc3545",
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  removeButtonText: {
-    color: "#fff",
-    fontSize: 14,
-    fontWeight: "600",
-  },
-  addButton: {
-    backgroundColor: "#007AFF",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
-    justifyContent: "center",
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
-  addButtonText: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#fff",
-  },
-  footerSection: {
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    backgroundColor: "#fff",
-    borderTopWidth: 1,
-    borderTopColor: "#eee",
-  },
-  saveButtonLarge: {
-    backgroundColor: "#007bff",
-    borderRadius: 8,
-    paddingVertical: 14,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  saveButtonLargeText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "700",
-  },
-  emptyStateText: {
-    textAlign: "center",
-    color: "#999",
-    fontSize: 14,
-    marginTop: 20,
-  },
-});
-
-export default styles;
+    fishCardHeaderContent: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+    },
+    fishCardTitle: {
+      fontSize: 16,
+      fontWeight: "700",
+      color: colors.text,
+    },
+    fishCardSubtitle: {
+      fontSize: 15,
+      color: colors.warning,
+      fontWeight: "500",
+    },
+    fieldGroup: {
+      marginBottom: 14,
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 16,
+      backgroundColor: colors.surface,
+      color: colors.text,
+    },
+    inputDisabled: {
+      backgroundColor: colors.backgroundSecondary,
+      color: colors.textSecondary,
+      borderColor: colors.separator,
+    },
+    errorText: {
+      color: colors.error,
+      fontSize: 12,
+      marginTop: 4,
+      fontWeight: "500",
+    },
+    buttonRow: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      gap: 8,
+      marginTop: 12,
+    },
+    removeButton: {
+      backgroundColor: colors.error,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    removeButtonText: {
+      color: "#fff",
+      fontSize: 14,
+      fontWeight: "600",
+    },
+    addButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    addButtonText: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: "#fff",
+    },
+    footerSection: {
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+      backgroundColor: colors.surface,
+      borderTopWidth: 1,
+      borderTopColor: colors.separator,
+    },
+    saveButtonLarge: {
+      backgroundColor: colors.primary,
+      borderRadius: 8,
+      paddingVertical: 14,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    saveButtonLargeText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "700",
+    },
+    emptyStateText: {
+      textAlign: "center",
+      color: colors.textSecondary,
+      fontSize: 14,
+      marginTop: 20,
+    },
+  });
--- a/components/tripInfo/modal/style/CrewDetailModal.styles.ts
+++ b/components/tripInfo/modal/style/CrewDetailModal.styles.ts
@@ -1,69 +1,69 @@
+import { Colors } from "@/constants/theme";
 import { StyleSheet } from "react-native";

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#f5f5f5",
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 20,
-    paddingTop: 30,
-    paddingBottom: 16,
-    backgroundColor: "#fff",
-    borderBottomWidth: 1,
-    borderBottomColor: "#eee",
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: "700",
-    color: "#000",
-    flex: 1,
-  },
-  closeButton: {
-    padding: 4,
-  },
-  closeIconButton: {
-    backgroundColor: "#FF3B30",
-    borderRadius: 10,
-    padding: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-    marginBottom: 15,
-  },
-  infoCard: {
-    backgroundColor: "#fff",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 35,
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
-  infoRow: {
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: "#f0f0f0",
-  },
-  infoLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#666",
-    marginBottom: 6,
-  },
-  infoValue: {
-    fontSize: 16,
-    color: "#000",
-    fontWeight: "500",
-  },
-});
-
-export default styles;
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 30,
+      paddingBottom: 16,
+      backgroundColor: colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: "700",
+      color: colors.text,
+      flex: 1,
+    },
+    closeButton: {
+      padding: 4,
+    },
+    closeIconButton: {
+      backgroundColor: colors.error,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    content: {
+      flex: 1,
+      padding: 16,
+      marginBottom: 15,
+    },
+    infoCard: {
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 35,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    infoRow: {
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    infoLabel: {
+      fontSize: 13,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    infoValue: {
+      fontSize: 16,
+      color: colors.text,
+      fontWeight: "500",
+    },
+  });
--- a/components/tripInfo/modal/style/NetDetailModal.styles.ts
+++ b/components/tripInfo/modal/style/NetDetailModal.styles.ts
@@ -1,292 +1,293 @@
+import { Colors } from "@/constants/theme";
 import { StyleSheet } from "react-native";

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#f5f5f5",
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 20,
-    paddingTop: 30,
-    paddingBottom: 16,
-    backgroundColor: "#fff",
-    borderBottomWidth: 1,
-    borderBottomColor: "#eee",
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: "700",
-    color: "#000",
-    flex: 1,
-  },
-  closeButton: {
-    padding: 4,
-  },
-  closeIconButton: {
-    backgroundColor: "#FF3B30",
-    borderRadius: 10,
-    padding: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-    marginBottom: 15,
-  },
-  infoCard: {
-    backgroundColor: "#fff",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 35,
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
-  infoRow: {
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: "#f0f0f0",
-  },
-  infoLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#666",
-    marginBottom: 6,
-  },
-  infoValue: {
-    fontSize: 16,
-    color: "#000",
-    fontWeight: "500",
-  },
-  statusBadge: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 8,
-    alignSelf: "flex-start",
-  },
-  statusBadgeCompleted: {
-    backgroundColor: "#e8f5e9",
-  },
-  statusBadgeInProgress: {
-    backgroundColor: "#fff3e0",
-  },
-  statusBadgeText: {
-    fontSize: 14,
-    fontWeight: "600",
-  },
-  statusBadgeTextCompleted: {
-    color: "#2e7d32",
-  },
-  statusBadgeTextInProgress: {
-    color: "#f57c00",
-  },
-  headerButtons: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-  },
-  editButton: {
-    padding: 4,
-  },
-  editIconButton: {
-    backgroundColor: "#007AFF",
-    borderRadius: 10,
-    padding: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  cancelButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-  cancelButtonText: {
-    color: "#007AFF",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  saveButton: {
-    backgroundColor: "#007AFF",
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-    borderRadius: 6,
-  },
-  saveButtonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  sectionHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginTop: 16,
-    marginBottom: 12,
-    paddingHorizontal: 4,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: "700",
-    color: "#000",
-  },
-  totalCatchText: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#007AFF",
-  },
-  fishCard: {
-    position: "relative",
-    backgroundColor: "#fff",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
-  fieldGroup: {
-    marginBottom: 12,
-    marginTop: 0,
-  },
-  rowGroup: {
-    flexDirection: "row",
-    marginBottom: 12,
-  },
-  label: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#666",
-    marginBottom: 6,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#007AFF",
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontSize: 15,
-    color: "#000",
-    backgroundColor: "#fff",
-  },
-  selectButton: {
-    borderWidth: 1,
-    borderColor: "#007AFF",
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    backgroundColor: "#fff",
-  },
-  selectButtonText: {
-    fontSize: 15,
-    color: "#000",
-  },
-  optionsList: {
-    position: "absolute",
-    top: 46,
-    left: 0,
-    right: 0,
-    borderWidth: 1,
-    borderColor: "#007AFF",
-    borderRadius: 8,
-    marginTop: 4,
-    backgroundColor: "#fff",
-    maxHeight: 100,
-    zIndex: 1000,
-    elevation: 5,
-    shadowColor: "#000",
-    shadowOpacity: 0.15,
-    shadowRadius: 8,
-    shadowOffset: { width: 0, height: 4 },
-  },
-  optionItem: {
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: "#f0f0f0",
-  },
-  optionText: {
-    fontSize: 15,
-    color: "#000",
-  },
-  optionsStatusFishList: {
-    borderWidth: 1,
-    borderColor: "#007AFF",
-    borderRadius: 8,
-    marginTop: 4,
-    backgroundColor: "#fff",
-    maxHeight: 120,
-    zIndex: 1000,
-    elevation: 5,
-    shadowColor: "#000",
-    shadowOpacity: 0.15,
-    shadowRadius: 8,
-    shadowOffset: { width: 0, height: 4 },
-  },
-  fishNameDropdown: {
-    position: "absolute",
-    top: 46,
-    left: 0,
-    right: 0,
-    borderWidth: 1,
-    borderColor: "#007AFF",
-    borderRadius: 8,
-    marginTop: 4,
-    backgroundColor: "#fff",
-    maxHeight: 180,
-    zIndex: 1000,
-    elevation: 5,
-    shadowColor: "#000",
-    shadowOpacity: 0.15,
-    shadowRadius: 8,
-    shadowOffset: { width: 0, height: 4 },
-  },
-  fishCardHeaderContent: {
-    flexDirection: "row",
-    gap: 5,
-  },
-  fishCardTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#000",
-  },
-  fishCardSubtitle: {
-    fontSize: 15,
-    color: "#ff6600",
-    marginTop: 0,
-  },
-  addFishButton: {
-    backgroundColor: "#007AFF",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
-    justifyContent: "center",
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
-  addFishButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  addFishButtonText: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#fff",
-  },
-});
-
-export default styles;
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 30,
+      paddingBottom: 16,
+      backgroundColor: colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: "700",
+      color: colors.text,
+      flex: 1,
+    },
+    closeButton: {
+      padding: 4,
+    },
+    closeIconButton: {
+      backgroundColor: colors.error,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    content: {
+      flex: 1,
+      padding: 16,
+      marginBottom: 15,
+    },
+    infoCard: {
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 35,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    infoRow: {
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    infoLabel: {
+      fontSize: 13,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    infoValue: {
+      fontSize: 16,
+      color: colors.text,
+      fontWeight: "500",
+    },
+    statusBadge: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 8,
+      alignSelf: "flex-start",
+    },
+    statusBadgeCompleted: {
+      backgroundColor: colors.success,
+    },
+    statusBadgeInProgress: {
+      backgroundColor: colors.warning,
+    },
+    statusBadgeText: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: "#fff",
+    },
+    statusBadgeTextCompleted: {
+      color: "#fff",
+    },
+    statusBadgeTextInProgress: {
+      color: "#fff",
+    },
+    headerButtons: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 12,
+    },
+    editButton: {
+      padding: 4,
+    },
+    editIconButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    cancelButton: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    },
+    cancelButtonText: {
+      color: colors.primary,
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    saveButton: {
+      backgroundColor: colors.primary,
+      paddingHorizontal: 16,
+      paddingVertical: 6,
+      borderRadius: 6,
+    },
+    saveButtonText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    sectionHeader: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: 16,
+      marginBottom: 12,
+      paddingHorizontal: 4,
+    },
+    sectionTitle: {
+      fontSize: 18,
+      fontWeight: "700",
+      color: colors.text,
+    },
+    totalCatchText: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: colors.primary,
+    },
+    fishCard: {
+      position: "relative",
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 12,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    fieldGroup: {
+      marginBottom: 12,
+      marginTop: 0,
+    },
+    rowGroup: {
+      flexDirection: "row",
+      marginBottom: 12,
+    },
+    label: {
+      fontSize: 13,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 15,
+      color: colors.text,
+      backgroundColor: colors.surface,
+    },
+    selectButton: {
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: colors.surface,
+    },
+    selectButtonText: {
+      fontSize: 15,
+      color: colors.text,
+    },
+    optionsList: {
+      position: "absolute",
+      top: 46,
+      left: 0,
+      right: 0,
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      marginTop: 4,
+      backgroundColor: colors.surface,
+      maxHeight: 100,
+      zIndex: 1000,
+      elevation: 5,
+      shadowColor: "#000",
+      shadowOpacity: 0.15,
+      shadowRadius: 8,
+      shadowOffset: { width: 0, height: 4 },
+    },
+    optionItem: {
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    optionText: {
+      fontSize: 15,
+      color: colors.text,
+    },
+    optionsStatusFishList: {
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      marginTop: 4,
+      backgroundColor: colors.surface,
+      maxHeight: 120,
+      zIndex: 1000,
+      elevation: 5,
+      shadowColor: "#000",
+      shadowOpacity: 0.15,
+      shadowRadius: 8,
+      shadowOffset: { width: 0, height: 4 },
+    },
+    fishNameDropdown: {
+      position: "absolute",
+      top: 46,
+      left: 0,
+      right: 0,
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      marginTop: 4,
+      backgroundColor: colors.surface,
+      maxHeight: 180,
+      zIndex: 1000,
+      elevation: 5,
+      shadowColor: "#000",
+      shadowOpacity: 0.15,
+      shadowRadius: 8,
+      shadowOffset: { width: 0, height: 4 },
+    },
+    fishCardHeaderContent: {
+      flexDirection: "row",
+      gap: 5,
+    },
+    fishCardTitle: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: colors.text,
+    },
+    fishCardSubtitle: {
+      fontSize: 15,
+      color: colors.warning,
+      marginTop: 0,
+    },
+    addFishButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    addFishButtonContent: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+    },
+    addFishButtonText: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: "#fff",
+    },
+  });
--- a/components/tripInfo/modal/style/TripCostDetailModal.styles.ts
+++ b/components/tripInfo/modal/style/TripCostDetailModal.styles.ts
@@ -1,153 +1,153 @@
+import { Colors } from "@/constants/theme";
 import { StyleSheet } from "react-native";

-const styles = StyleSheet.create({
-  closeIconButton: {
-    backgroundColor: "#FF3B30",
-    borderRadius: 10,
-    padding: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  container: {
-    flex: 1,
-    backgroundColor: "#f5f5f5",
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 20,
-    paddingTop: 30,
-    paddingBottom: 16,
-    backgroundColor: "#fff",
-    borderBottomWidth: 1,
-    borderBottomColor: "#eee",
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: "700",
-    color: "#000",
-    flex: 1,
-  },
-  headerButtons: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-  },
-  editButton: {
-    padding: 4,
-  },
-  editIconButton: {
-    backgroundColor: "#007AFF",
-    borderRadius: 10,
-    padding: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  cancelButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-  cancelButtonText: {
-    color: "#007AFF",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  saveButton: {
-    backgroundColor: "#007AFF",
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-    borderRadius: 6,
-  },
-  saveButtonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  closeButton: {
-    padding: 4,
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  itemCard: {
-    backgroundColor: "#fff",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
-  fieldGroup: {
-    marginBottom: 12,
-  },
-  rowGroup: {
-    flexDirection: "row",
-    marginBottom: 12,
-  },
-  label: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#666",
-    marginBottom: 6,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#007AFF",
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontSize: 15,
-    color: "#000",
-    backgroundColor: "#fff",
-  },
-  inputDisabled: {
-    borderColor: "#ddd",
-    backgroundColor: "#f9f9f9",
-    color: "#666",
-  },
-  totalContainer: {
-    backgroundColor: "#fff5e6",
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderWidth: 1,
-    borderColor: "#ffd699",
-  },
-  totalText: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: "#ff6600",
-  },
-  footerTotal: {
-    backgroundColor: "#fff",
-    borderRadius: 12,
-    padding: 20,
-    marginTop: 8,
-    marginBottom: 50,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 3,
-  },
-  footerLabel: {
-    fontSize: 18,
-    fontWeight: "700",
-    color: "#007bff",
-  },
-  footerAmount: {
-    fontSize: 20,
-    fontWeight: "700",
-    color: "#ff6600",
-  },
-});
-
-export default styles;
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
+    closeIconButton: {
+      backgroundColor: colors.error,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 30,
+      paddingBottom: 16,
+      backgroundColor: colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: "700",
+      color: colors.text,
+      flex: 1,
+    },
+    headerButtons: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 12,
+    },
+    editButton: {
+      padding: 4,
+    },
+    editIconButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    cancelButton: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    },
+    cancelButtonText: {
+      color: colors.primary,
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    saveButton: {
+      backgroundColor: colors.primary,
+      paddingHorizontal: 16,
+      paddingVertical: 6,
+      borderRadius: 6,
+    },
+    saveButtonText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    closeButton: {
+      padding: 4,
+    },
+    content: {
+      flex: 1,
+      padding: 16,
+    },
+    itemCard: {
+      backgroundColor: colors.surfaceSecondary,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 12,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    fieldGroup: {
+      marginBottom: 12,
+    },
+    rowGroup: {
+      flexDirection: "row",
+      marginBottom: 12,
+    },
+    label: {
+      fontSize: 13,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 15,
+      color: colors.text,
+      backgroundColor: colors.surface,
+    },
+    inputDisabled: {
+      borderColor: colors.border,
+      backgroundColor: colors.backgroundSecondary,
+      color: colors.textSecondary,
+    },
+    totalContainer: {
+      backgroundColor: colors.backgroundSecondary,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    totalText: {
+      fontSize: 16,
+      fontWeight: "700",
+      color: colors.warning,
+    },
+    footerTotal: {
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 20,
+      marginTop: 8,
+      marginBottom: 50,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 3,
+    },
+    footerLabel: {
+      fontSize: 18,
+      fontWeight: "700",
+      color: colors.primary,
+    },
+    footerAmount: {
+      fontSize: 20,
+      fontWeight: "700",
+      color: colors.warning,
+    },
+  });