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,14 +72,15 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
  );
 };

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

-const styles = StyleSheet.create({
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
    container: {
      flex: 1,
-    backgroundColor: "#f5f5f5",
+      backgroundColor: colors.backgroundSecondary,
    },
    header: {
      flexDirection: "row",
@@ -12,14 +14,14 @@ const styles = StyleSheet.create({
      paddingHorizontal: 20,
      paddingTop: 30,
      paddingBottom: 16,
-    backgroundColor: "#fff",
+      backgroundColor: colors.surface,
      borderBottomWidth: 1,
-    borderBottomColor: "#eee",
+      borderBottomColor: colors.separator,
    },
    title: {
      fontSize: 22,
      fontWeight: "700",
-    color: "#000",
+      color: colors.text,
      flex: 1,
    },
    headerButtons: {
@@ -31,14 +33,14 @@ const styles = StyleSheet.create({
      padding: 4,
    },
    closeIconButton: {
-    backgroundColor: "#FF3B30",
+      backgroundColor: colors.error,
      borderRadius: 10,
      padding: 10,
      justifyContent: "center",
      alignItems: "center",
    },
    saveButton: {
-    backgroundColor: "#007bff",
+      backgroundColor: colors.primary,
      borderRadius: 8,
      paddingHorizontal: 20,
      paddingVertical: 10,
@@ -56,7 +58,7 @@ const styles = StyleSheet.create({
      marginBottom: 15,
    },
    fishCard: {
-    backgroundColor: "#fff",
+      backgroundColor: colors.card,
      borderRadius: 12,
      padding: 16,
      marginBottom: 16,
@@ -75,11 +77,11 @@ const styles = StyleSheet.create({
    fishCardTitle: {
      fontSize: 16,
      fontWeight: "700",
-    color: "#000",
+      color: colors.text,
    },
    fishCardSubtitle: {
      fontSize: 15,
-    color: "#ff6600",
+      color: colors.warning,
      fontWeight: "500",
    },
    fieldGroup: {
@@ -88,26 +90,26 @@ const styles = StyleSheet.create({
    label: {
      fontSize: 14,
      fontWeight: "600",
-    color: "#333",
+      color: colors.textSecondary,
      marginBottom: 6,
    },
    input: {
      borderWidth: 1,
-    borderColor: "#ddd",
+      borderColor: colors.border,
      borderRadius: 8,
      paddingHorizontal: 12,
      paddingVertical: 10,
      fontSize: 16,
-    backgroundColor: "#fff",
-    color: "#000",
+      backgroundColor: colors.surface,
+      color: colors.text,
    },
    inputDisabled: {
-    backgroundColor: "#f5f5f5",
-    color: "#999",
-    borderColor: "#eee",
+      backgroundColor: colors.backgroundSecondary,
+      color: colors.textSecondary,
+      borderColor: colors.separator,
    },
    errorText: {
-    color: "#dc3545",
+      color: colors.error,
      fontSize: 12,
      marginTop: 4,
      fontWeight: "500",
@@ -119,7 +121,7 @@ const styles = StyleSheet.create({
      marginTop: 12,
    },
    removeButton: {
-    backgroundColor: "#dc3545",
+      backgroundColor: colors.error,
      borderRadius: 8,
      paddingHorizontal: 16,
      paddingVertical: 8,
@@ -132,7 +134,7 @@ const styles = StyleSheet.create({
      fontWeight: "600",
    },
    addButton: {
-    backgroundColor: "#007AFF",
+      backgroundColor: colors.primary,
      borderRadius: 12,
      padding: 16,
      marginBottom: 12,
@@ -152,12 +154,12 @@ const styles = StyleSheet.create({
    footerSection: {
      paddingHorizontal: 16,
      paddingVertical: 16,
-    backgroundColor: "#fff",
+      backgroundColor: colors.surface,
      borderTopWidth: 1,
-    borderTopColor: "#eee",
+      borderTopColor: colors.separator,
    },
    saveButtonLarge: {
-    backgroundColor: "#007bff",
+      backgroundColor: colors.primary,
      borderRadius: 8,
      paddingVertical: 14,
      justifyContent: "center",
@@ -170,10 +172,8 @@ const styles = StyleSheet.create({
    },
    emptyStateText: {
      textAlign: "center",
-    color: "#999",
+      color: colors.textSecondary,
      fontSize: 14,
      marginTop: 20,
    },
  });
-
-export default styles;
--- a/components/tripInfo/modal/style/CrewDetailModal.styles.ts
+++ b/components/tripInfo/modal/style/CrewDetailModal.styles.ts
@@ -1,9 +1,11 @@
+import { Colors } from "@/constants/theme";
 import { StyleSheet } from "react-native";

-const styles = StyleSheet.create({
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
    container: {
      flex: 1,
-    backgroundColor: "#f5f5f5",
+      backgroundColor: colors.backgroundSecondary,
    },
    header: {
      flexDirection: "row",
@@ -12,21 +14,21 @@ const styles = StyleSheet.create({
      paddingHorizontal: 20,
      paddingTop: 30,
      paddingBottom: 16,
-    backgroundColor: "#fff",
+      backgroundColor: colors.surface,
      borderBottomWidth: 1,
-    borderBottomColor: "#eee",
+      borderBottomColor: colors.separator,
    },
    title: {
      fontSize: 22,
      fontWeight: "700",
-    color: "#000",
+      color: colors.text,
      flex: 1,
    },
    closeButton: {
      padding: 4,
    },
    closeIconButton: {
-    backgroundColor: "#FF3B30",
+      backgroundColor: colors.error,
      borderRadius: 10,
      padding: 10,
      justifyContent: "center",
@@ -38,7 +40,7 @@ const styles = StyleSheet.create({
      marginBottom: 15,
    },
    infoCard: {
-    backgroundColor: "#fff",
+      backgroundColor: colors.card,
      borderRadius: 12,
      padding: 16,
      marginBottom: 35,
@@ -51,19 +53,17 @@ const styles = StyleSheet.create({
    infoRow: {
      paddingVertical: 12,
      borderBottomWidth: 1,
-    borderBottomColor: "#f0f0f0",
+      borderBottomColor: colors.separator,
    },
    infoLabel: {
      fontSize: 13,
      fontWeight: "600",
-    color: "#666",
+      color: colors.textSecondary,
      marginBottom: 6,
    },
    infoValue: {
      fontSize: 16,
-    color: "#000",
+      color: colors.text,
      fontWeight: "500",
    },
  });
-
-export default styles;
--- a/components/tripInfo/modal/style/NetDetailModal.styles.ts
+++ b/components/tripInfo/modal/style/NetDetailModal.styles.ts
@@ -1,9 +1,11 @@
+import { Colors } from "@/constants/theme";
 import { StyleSheet } from "react-native";

-const styles = StyleSheet.create({
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
    container: {
      flex: 1,
-    backgroundColor: "#f5f5f5",
+      backgroundColor: colors.backgroundSecondary,
    },
    header: {
      flexDirection: "row",
@@ -12,21 +14,21 @@ const styles = StyleSheet.create({
      paddingHorizontal: 20,
      paddingTop: 30,
      paddingBottom: 16,
-    backgroundColor: "#fff",
+      backgroundColor: colors.surface,
      borderBottomWidth: 1,
-    borderBottomColor: "#eee",
+      borderBottomColor: colors.separator,
    },
    title: {
      fontSize: 22,
      fontWeight: "700",
-    color: "#000",
+      color: colors.text,
      flex: 1,
    },
    closeButton: {
      padding: 4,
    },
    closeIconButton: {
-    backgroundColor: "#FF3B30",
+      backgroundColor: colors.error,
      borderRadius: 10,
      padding: 10,
      justifyContent: "center",
@@ -38,7 +40,7 @@ const styles = StyleSheet.create({
      marginBottom: 15,
    },
    infoCard: {
-    backgroundColor: "#fff",
+      backgroundColor: colors.card,
      borderRadius: 12,
      padding: 16,
      marginBottom: 35,
@@ -51,17 +53,17 @@ const styles = StyleSheet.create({
    infoRow: {
      paddingVertical: 12,
      borderBottomWidth: 1,
-    borderBottomColor: "#f0f0f0",
+      borderBottomColor: colors.separator,
    },
    infoLabel: {
      fontSize: 13,
      fontWeight: "600",
-    color: "#666",
+      color: colors.textSecondary,
      marginBottom: 6,
    },
    infoValue: {
      fontSize: 16,
-    color: "#000",
+      color: colors.text,
      fontWeight: "500",
    },
    statusBadge: {
@@ -71,20 +73,21 @@ const styles = StyleSheet.create({
      alignSelf: "flex-start",
    },
    statusBadgeCompleted: {
-    backgroundColor: "#e8f5e9",
+      backgroundColor: colors.success,
    },
    statusBadgeInProgress: {
-    backgroundColor: "#fff3e0",
+      backgroundColor: colors.warning,
    },
    statusBadgeText: {
      fontSize: 14,
      fontWeight: "600",
+      color: "#fff",
    },
    statusBadgeTextCompleted: {
-    color: "#2e7d32",
+      color: "#fff",
    },
    statusBadgeTextInProgress: {
-    color: "#f57c00",
+      color: "#fff",
    },
    headerButtons: {
      flexDirection: "row",
@@ -95,7 +98,7 @@ const styles = StyleSheet.create({
      padding: 4,
    },
    editIconButton: {
-    backgroundColor: "#007AFF",
+      backgroundColor: colors.primary,
      borderRadius: 10,
      padding: 10,
      justifyContent: "center",
@@ -106,12 +109,12 @@ const styles = StyleSheet.create({
      paddingVertical: 6,
    },
    cancelButtonText: {
-    color: "#007AFF",
+      color: colors.primary,
      fontSize: 16,
      fontWeight: "600",
    },
    saveButton: {
-    backgroundColor: "#007AFF",
+      backgroundColor: colors.primary,
      paddingHorizontal: 16,
      paddingVertical: 6,
      borderRadius: 6,
@@ -132,16 +135,16 @@ const styles = StyleSheet.create({
    sectionTitle: {
      fontSize: 18,
      fontWeight: "700",
-    color: "#000",
+      color: colors.text,
    },
    totalCatchText: {
      fontSize: 16,
      fontWeight: "600",
-    color: "#007AFF",
+      color: colors.primary,
    },
    fishCard: {
      position: "relative",
-    backgroundColor: "#fff",
+      backgroundColor: colors.card,
      borderRadius: 12,
      padding: 16,
      marginBottom: 12,
@@ -162,33 +165,33 @@ const styles = StyleSheet.create({
    label: {
      fontSize: 13,
      fontWeight: "600",
-    color: "#666",
+      color: colors.textSecondary,
      marginBottom: 6,
    },
    input: {
      borderWidth: 1,
-    borderColor: "#007AFF",
+      borderColor: colors.primary,
      borderRadius: 8,
      paddingHorizontal: 12,
      paddingVertical: 10,
      fontSize: 15,
-    color: "#000",
-    backgroundColor: "#fff",
+      color: colors.text,
+      backgroundColor: colors.surface,
    },
    selectButton: {
      borderWidth: 1,
-    borderColor: "#007AFF",
+      borderColor: colors.primary,
      borderRadius: 8,
      paddingHorizontal: 12,
      paddingVertical: 10,
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
-    backgroundColor: "#fff",
+      backgroundColor: colors.surface,
    },
    selectButtonText: {
      fontSize: 15,
-    color: "#000",
+      color: colors.text,
    },
    optionsList: {
      position: "absolute",
@@ -196,10 +199,10 @@ const styles = StyleSheet.create({
      left: 0,
      right: 0,
      borderWidth: 1,
-    borderColor: "#007AFF",
+      borderColor: colors.primary,
      borderRadius: 8,
      marginTop: 4,
-    backgroundColor: "#fff",
+      backgroundColor: colors.surface,
      maxHeight: 100,
      zIndex: 1000,
      elevation: 5,
@@ -212,18 +215,18 @@ const styles = StyleSheet.create({
      paddingHorizontal: 12,
      paddingVertical: 12,
      borderBottomWidth: 1,
-    borderBottomColor: "#f0f0f0",
+      borderBottomColor: colors.separator,
    },
    optionText: {
      fontSize: 15,
-    color: "#000",
+      color: colors.text,
    },
    optionsStatusFishList: {
      borderWidth: 1,
-    borderColor: "#007AFF",
+      borderColor: colors.primary,
      borderRadius: 8,
      marginTop: 4,
-    backgroundColor: "#fff",
+      backgroundColor: colors.surface,
      maxHeight: 120,
      zIndex: 1000,
      elevation: 5,
@@ -238,10 +241,10 @@ const styles = StyleSheet.create({
      left: 0,
      right: 0,
      borderWidth: 1,
-    borderColor: "#007AFF",
+      borderColor: colors.primary,
      borderRadius: 8,
      marginTop: 4,
-    backgroundColor: "#fff",
+      backgroundColor: colors.surface,
      maxHeight: 180,
      zIndex: 1000,
      elevation: 5,
@@ -257,15 +260,15 @@ const styles = StyleSheet.create({
    fishCardTitle: {
      fontSize: 16,
      fontWeight: "600",
-    color: "#000",
+      color: colors.text,
    },
    fishCardSubtitle: {
      fontSize: 15,
-    color: "#ff6600",
+      color: colors.warning,
      marginTop: 0,
    },
    addFishButton: {
-    backgroundColor: "#007AFF",
+      backgroundColor: colors.primary,
      borderRadius: 12,
      padding: 16,
      marginBottom: 12,
@@ -288,5 +291,3 @@ const styles = StyleSheet.create({
      color: "#fff",
    },
  });
-
-export default styles;
--- a/components/tripInfo/modal/style/TripCostDetailModal.styles.ts
+++ b/components/tripInfo/modal/style/TripCostDetailModal.styles.ts
@@ -1,8 +1,10 @@
+import { Colors } from "@/constants/theme";
 import { StyleSheet } from "react-native";

-const styles = StyleSheet.create({
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
    closeIconButton: {
-    backgroundColor: "#FF3B30",
+      backgroundColor: colors.error,
      borderRadius: 10,
      padding: 10,
      justifyContent: "center",
@@ -10,7 +12,7 @@ const styles = StyleSheet.create({
    },
    container: {
      flex: 1,
-    backgroundColor: "#f5f5f5",
+      backgroundColor: colors.backgroundSecondary,
    },
    header: {
      flexDirection: "row",
@@ -19,14 +21,14 @@ const styles = StyleSheet.create({
      paddingHorizontal: 20,
      paddingTop: 30,
      paddingBottom: 16,
-    backgroundColor: "#fff",
+      backgroundColor: colors.surface,
      borderBottomWidth: 1,
-    borderBottomColor: "#eee",
+      borderBottomColor: colors.separator,
    },
    title: {
      fontSize: 22,
      fontWeight: "700",
-    color: "#000",
+      color: colors.text,
      flex: 1,
    },
    headerButtons: {
@@ -38,7 +40,7 @@ const styles = StyleSheet.create({
      padding: 4,
    },
    editIconButton: {
-    backgroundColor: "#007AFF",
+      backgroundColor: colors.primary,
      borderRadius: 10,
      padding: 10,
      justifyContent: "center",
@@ -49,12 +51,12 @@ const styles = StyleSheet.create({
      paddingVertical: 6,
    },
    cancelButtonText: {
-    color: "#007AFF",
+      color: colors.primary,
      fontSize: 16,
      fontWeight: "600",
    },
    saveButton: {
-    backgroundColor: "#007AFF",
+      backgroundColor: colors.primary,
      paddingHorizontal: 16,
      paddingVertical: 6,
      borderRadius: 6,
@@ -72,7 +74,7 @@ const styles = StyleSheet.create({
      padding: 16,
    },
    itemCard: {
-    backgroundColor: "#fff",
+      backgroundColor: colors.surfaceSecondary,
      borderRadius: 12,
      padding: 16,
      marginBottom: 12,
@@ -92,39 +94,39 @@ const styles = StyleSheet.create({
    label: {
      fontSize: 13,
      fontWeight: "600",
-    color: "#666",
+      color: colors.textSecondary,
      marginBottom: 6,
    },
    input: {
      borderWidth: 1,
-    borderColor: "#007AFF",
+      borderColor: colors.primary,
      borderRadius: 8,
      paddingHorizontal: 12,
      paddingVertical: 10,
      fontSize: 15,
-    color: "#000",
-    backgroundColor: "#fff",
+      color: colors.text,
+      backgroundColor: colors.surface,
    },
    inputDisabled: {
-    borderColor: "#ddd",
-    backgroundColor: "#f9f9f9",
-    color: "#666",
+      borderColor: colors.border,
+      backgroundColor: colors.backgroundSecondary,
+      color: colors.textSecondary,
    },
    totalContainer: {
-    backgroundColor: "#fff5e6",
+      backgroundColor: colors.backgroundSecondary,
      borderRadius: 8,
      paddingHorizontal: 12,
      paddingVertical: 10,
      borderWidth: 1,
-    borderColor: "#ffd699",
+      borderColor: colors.border,
    },
    totalText: {
      fontSize: 16,
      fontWeight: "700",
-    color: "#ff6600",
+      color: colors.warning,
    },
    footerTotal: {
-    backgroundColor: "#fff",
+      backgroundColor: colors.card,
      borderRadius: 12,
      padding: 20,
      marginTop: 8,
@@ -141,13 +143,11 @@ const styles = StyleSheet.create({
    footerLabel: {
      fontSize: 18,
      fontWeight: "700",
-    color: "#007bff",
+      color: colors.primary,
    },
    footerAmount: {
      fontSize: 20,
      fontWeight: "700",
-    color: "#ff6600",
+      color: colors.warning,
    },
  });
-
-export default styles;