update theme dark, light mode

components/tripInfo/NetListTable.tsx

@@ -2,10 +2,12 @@ import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useI18n } from "@/hooks/use-i18n";
 import { useFishes } from "@/state/use-fish";
 import { useTrip } from "@/state/use-trip";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
 import CreateOrUpdateHaulModal from "./modal/CreateOrUpdateHaulModal";
-import styles from "./style/NetListTable.styles";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import { createTableStyles } from "./ThemedTable";
 
 const NetListTable: React.FC = () => {
   const [collapsed, setCollapsed] = useState(true);
@@ -14,17 +16,16 @@ const NetListTable: React.FC = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const [selectedNet, setSelectedNet] = useState<Model.FishingLog | null>(null);
   const { t } = useI18n();
+  const { colorScheme } = useAppTheme();
+  const { colors } = useThemeContext();
+  const styles = useMemo(() => createTableStyles(colorScheme), [colorScheme]);
+
   const { trip } = useTrip();
   const { fishSpecies, getFishSpecies } = useFishes();
   useEffect(() => {
     getFishSpecies();
   }, []);
 
-  // useEffect(() => {
-  //   console.log("Trip thay đổi: ", trip?.fishing_logs?.length);
-  // }, [trip]);
-  // const data: Model.FishingLog[] = trip?.fishing_logs ?? [];
-
   const handleToggle = () => {
     const toValue = collapsed ? contentHeight : 0;
     Animated.timing(animatedHeight, {
@@ -60,7 +61,7 @@ const NetListTable: React.FC = () => {
         <IconSymbol
           name={collapsed ? "chevron.down" : "chevron.up"}
           size={16}
-          color="#000"
+          color={colors.icon}
         />
       </TouchableOpacity>