update darkMode for modal

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",
+    },
+  });