From c47d9ad14cb712c32314c19c7421a7af374d12c3 Mon Sep 17 00:00:00 2001
From: MinhNN <minhnguyennhatt@gmail.com>
Date: Sun, 7 Dec 2025 23:09:51 +0700
Subject: [PATCH] =?UTF-8?q?c=E1=BA=ADp=20nh=E1=BA=ADt=20themes=20cho=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(tabs)/diary.tsx                 |  36 +++++--
 components/diary/DateRangePicker.tsx |  77 +++++++++-----
 components/diary/FilterButton.tsx    |  23 ++--
 components/diary/FilterModal.tsx     |  86 ++++++++++-----
 components/diary/ShipDropdown.tsx    | 151 ++++++++++-----------------
 components/diary/StatusDropdown.tsx  |  47 ++++-----
 components/diary/TripCard.tsx        |  80 ++++++++------
 7 files changed, 275 insertions(+), 225 deletions(-)

diff --git a/app/(tabs)/diary.tsx b/app/(tabs)/diary.tsx
index 6de5b7d..9dc8fed 100644
--- a/app/(tabs)/diary.tsx
+++ b/app/(tabs)/diary.tsx
@@ -16,9 +16,11 @@ import { useThings } from "@/state/use-thing";
 import { useTripsList } from "@/state/use-tripslist";
 import dayjs from "dayjs";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 export default function diary() {
   const { t } = useI18n();
+  const { colors } = useThemeContext();
   const [showFilterModal, setShowFilterModal] = useState(false);
   const [filters, setFilters] = useState<FilterValues>({
     status: null,
@@ -136,11 +138,30 @@ export default function diary() {
     // TODO: Show confirmation dialog and delete trip
   };
 
+  // Dynamic styles based on theme
+  const themedStyles = {
+    safeArea: {
+      backgroundColor: colors.background,
+    },
+    titleText: {
+      color: colors.text,
+    },
+    countText: {
+      color: colors.textSecondary,
+    },
+    addButton: {
+      backgroundColor: colors.primary,
+    },
+    emptyText: {
+      color: colors.textSecondary,
+    },
+  };
+
   return (
-    <SafeAreaView style={styles.safeArea} edges={["top"]}>
+    <SafeAreaView style={[styles.safeArea, themedStyles.safeArea]} edges={["top"]}>
       <View style={styles.container}>
         {/* Header */}
-        <Text style={styles.titleText}>{t("diary.title")}</Text>
+        <Text style={[styles.titleText, themedStyles.titleText]}>{t("diary.title")}</Text>
 
         {/* Filter & Add Button Row */}
         <View style={styles.actionRow}>
@@ -154,7 +175,7 @@ export default function diary() {
             }
           />
           <TouchableOpacity
-            style={styles.addButton}
+            style={[styles.addButton, themedStyles.addButton]}
             onPress={() => console.log("Add trip")}
             activeOpacity={0.7}
           >
@@ -164,7 +185,7 @@ export default function diary() {
         </View>
 
         {/* Trip Count */}
-        <Text style={styles.countText}>
+        <Text style={[styles.countText, themedStyles.countText]}>
           {t("diary.tripListCount", { count: tripsList?.total || 0 })}
         </Text>
 
@@ -189,7 +210,7 @@ export default function diary() {
 
           {(!tripsList || !tripsList.trips || tripsList.trips.length === 0) && (
             <View style={styles.emptyState}>
-              <Text style={styles.emptyText}>
+              <Text style={[styles.emptyText, themedStyles.emptyText]}>
                 {t("diary.noTripsFound")}
               </Text>
             </View>
@@ -210,7 +231,6 @@ export default function diary() {
 const styles = StyleSheet.create({
   safeArea: {
     flex: 1,
-    backgroundColor: "#F9FAFB",
   },
   container: {
     flex: 1,
@@ -221,7 +241,6 @@ const styles = StyleSheet.create({
     fontWeight: "700",
     lineHeight: 36,
     marginBottom: 10,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -245,7 +264,6 @@ const styles = StyleSheet.create({
   countText: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#374151",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -256,7 +274,6 @@ const styles = StyleSheet.create({
   addButton: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "#3B82F6",
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 8,
@@ -285,7 +302,6 @@ const styles = StyleSheet.create({
   },
   emptyText: {
     fontSize: 16,
-    color: "#9CA3AF",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
diff --git a/components/diary/DateRangePicker.tsx b/components/diary/DateRangePicker.tsx
index 185a849..e552ed6 100644
--- a/components/diary/DateRangePicker.tsx
+++ b/components/diary/DateRangePicker.tsx
@@ -10,6 +10,7 @@ import {
 import { Ionicons } from "@expo/vector-icons";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface DateRangePickerProps {
   startDate: Date | null;
@@ -25,6 +26,7 @@ export default function DateRangePicker({
   onEndDateChange,
 }: DateRangePickerProps) {
   const { t } = useI18n();
+  const { colors, colorScheme } = useThemeContext();
   const [showStartPicker, setShowStartPicker] = useState(false);
   const [showEndPicker, setShowEndPicker] = useState(false);
 
@@ -50,17 +52,46 @@ export default function DateRangePicker({
     }
   };
 
+  // Dynamic styles based on theme
+  const themedStyles = {
+    label: {
+      color: colors.text,
+    },
+    dateInput: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+    },
+    dateText: {
+      color: colors.text,
+    },
+    placeholder: {
+      color: colors.textSecondary,
+    },
+    pickerContainer: {
+      backgroundColor: colors.card,
+    },
+    pickerHeader: {
+      borderBottomColor: colors.border,
+    },
+    pickerTitle: {
+      color: colors.text,
+    },
+    cancelButton: {
+      color: colors.textSecondary,
+    },
+  };
+
   return (
     <View style={styles.container}>
-      <Text style={styles.label}>{t("diary.dateRangePicker.label")}</Text>
+      <Text style={[styles.label, themedStyles.label]}>{t("diary.dateRangePicker.label")}</Text>
       <View style={styles.dateRangeContainer}>
         {/* Start Date */}
         <TouchableOpacity
-          style={styles.dateInput}
+          style={[styles.dateInput, themedStyles.dateInput]}
           onPress={() => setShowStartPicker(true)}
           activeOpacity={0.7}
         >
-          <Text style={[styles.dateText, !startDate && styles.placeholder]}>
+          <Text style={[styles.dateText, themedStyles.dateText, !startDate && themedStyles.placeholder]}>
             {startDate ? formatDate(startDate) : t("diary.dateRangePicker.startDate")}
           </Text>
         </TouchableOpacity>
@@ -68,17 +99,17 @@ export default function DateRangePicker({
         <Ionicons
           name="arrow-forward"
           size={20}
-          color="#9CA3AF"
+          color={colors.textSecondary}
           style={styles.arrow}
         />
 
         {/* End Date */}
         <TouchableOpacity
-          style={styles.dateInput}
+          style={[styles.dateInput, themedStyles.dateInput]}
           onPress={() => setShowEndPicker(true)}
           activeOpacity={0.7}
         >
-          <Text style={[styles.dateText, !endDate && styles.placeholder]}>
+          <Text style={[styles.dateText, themedStyles.dateText, !endDate && themedStyles.placeholder]}>
             {endDate ? formatDate(endDate) : t("diary.dateRangePicker.endDate")}
           </Text>
         </TouchableOpacity>
@@ -87,7 +118,7 @@ export default function DateRangePicker({
           style={styles.calendarButton}
           onPress={() => setShowStartPicker(true)}
         >
-          <Ionicons name="calendar-outline" size={20} color="#6B7280" />
+          <Ionicons name="calendar-outline" size={20} color={colors.textSecondary} />
         </TouchableOpacity>
       </View>
 
@@ -95,12 +126,12 @@ export default function DateRangePicker({
       {showStartPicker && (
         <Modal transparent animationType="fade" visible={showStartPicker}>
           <View style={styles.modalOverlay}>
-            <View style={styles.pickerContainer}>
-              <View style={styles.pickerHeader}>
+            <View style={[styles.pickerContainer, themedStyles.pickerContainer]}>
+              <View style={[styles.pickerHeader, themedStyles.pickerHeader]}>
                 <TouchableOpacity onPress={() => setShowStartPicker(false)}>
-                  <Text style={styles.cancelButton}>{t("common.cancel")}</Text>
+                  <Text style={[styles.cancelButton, themedStyles.cancelButton]}>{t("common.cancel")}</Text>
                 </TouchableOpacity>
-                <Text style={styles.pickerTitle}>{t("diary.dateRangePicker.selectStartDate")}</Text>
+                <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>{t("diary.dateRangePicker.selectStartDate")}</Text>
                 <TouchableOpacity onPress={() => setShowStartPicker(false)}>
                   <Text style={styles.doneButton}>{t("diary.dateRangePicker.done")}</Text>
                 </TouchableOpacity>
@@ -111,6 +142,8 @@ export default function DateRangePicker({
                 display={Platform.OS === "ios" ? "spinner" : "default"}
                 onChange={handleStartDateChange}
                 maximumDate={endDate || undefined}
+                themeVariant={colorScheme}
+                textColor={colors.text}
               />
             </View>
           </View>
@@ -121,12 +154,12 @@ export default function DateRangePicker({
       {showEndPicker && (
         <Modal transparent animationType="fade" visible={showEndPicker}>
           <View style={styles.modalOverlay}>
-            <View style={styles.pickerContainer}>
-              <View style={styles.pickerHeader}>
+            <View style={[styles.pickerContainer, themedStyles.pickerContainer]}>
+              <View style={[styles.pickerHeader, themedStyles.pickerHeader]}>
                 <TouchableOpacity onPress={() => setShowEndPicker(false)}>
-                  <Text style={styles.cancelButton}>{t("common.cancel")}</Text>
+                  <Text style={[styles.cancelButton, themedStyles.cancelButton]}>{t("common.cancel")}</Text>
                 </TouchableOpacity>
-                <Text style={styles.pickerTitle}>{t("diary.dateRangePicker.selectEndDate")}</Text>
+                <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>{t("diary.dateRangePicker.selectEndDate")}</Text>
                 <TouchableOpacity onPress={() => setShowEndPicker(false)}>
                   <Text style={styles.doneButton}>{t("diary.dateRangePicker.done")}</Text>
                 </TouchableOpacity>
@@ -137,6 +170,8 @@ export default function DateRangePicker({
                 display={Platform.OS === "ios" ? "spinner" : "default"}
                 onChange={handleEndDateChange}
                 minimumDate={startDate || undefined}
+                themeVariant={colorScheme}
+                textColor={colors.text}
               />
             </View>
           </View>
@@ -153,7 +188,6 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     marginBottom: 8,
     fontFamily: Platform.select({
       ios: "System",
@@ -168,25 +202,19 @@ const styles = StyleSheet.create({
   },
   dateInput: {
     flex: 1,
-    backgroundColor: "#FFFFFF",
     borderWidth: 1,
-    borderColor: "#D1D5DB",
     borderRadius: 8,
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
   dateText: {
     fontSize: 16,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  placeholder: {
-    color: "#9CA3AF",
-  },
   arrow: {
     marginHorizontal: 4,
   },
@@ -199,7 +227,6 @@ const styles = StyleSheet.create({
     justifyContent: "flex-end",
   },
   pickerContainer: {
-    backgroundColor: "#FFFFFF",
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     paddingBottom: 20,
@@ -211,12 +238,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
   },
   pickerTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -225,7 +250,6 @@ const styles = StyleSheet.create({
   },
   cancelButton: {
     fontSize: 16,
-    color: "#6B7280",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -243,3 +267,4 @@ const styles = StyleSheet.create({
     }),
   },
 });
+
diff --git a/components/diary/FilterButton.tsx b/components/diary/FilterButton.tsx
index 79a0eb2..1238b41 100644
--- a/components/diary/FilterButton.tsx
+++ b/components/diary/FilterButton.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { TouchableOpacity, Text, StyleSheet, Platform } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface FilterButtonProps {
   onPress?: () => void;
@@ -13,26 +14,37 @@ export default function FilterButton({
   isFiltered,
 }: FilterButtonProps) {
   const { t } = useI18n();
+  const { colors } = useThemeContext();
   
+  const themedStyles = {
+    button: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+    },
+    text: {
+      color: isFiltered ? colors.primary : colors.textSecondary,
+    },
+  };
+
   return (
     <TouchableOpacity
-      style={styles.button}
+      style={[styles.button, themedStyles.button]}
       onPress={onPress}
       activeOpacity={0.7}
     >
       <Ionicons
         name="filter"
         size={20}
-        color={isFiltered ? "#3B82F6" : "#374151"}
+        color={isFiltered ? colors.primary : colors.textSecondary}
       />
-      <Text style={[styles.text, isFiltered && { color: "#3B82F6" }]}>
+      <Text style={[styles.text, themedStyles.text]}>
         {t("diary.filter")}
       </Text>
       {isFiltered && (
         <Ionicons
           name="ellipse"
           size={10}
-          color="#3B82F6"
+          color={colors.primary}
           style={{ marginLeft: 4 }}
         />
       )}
@@ -45,12 +57,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#FFFFFF",
     borderRadius: 12,
     paddingHorizontal: 20,
     paddingVertical: 12,
     borderWidth: 1,
-    borderColor: "#E5E7EB",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
@@ -63,7 +73,6 @@ const styles = StyleSheet.create({
   text: {
     fontSize: 16,
     fontWeight: "500",
-    color: "#374151",
     marginLeft: 8,
     fontFamily: Platform.select({
       ios: "System",
diff --git a/components/diary/FilterModal.tsx b/components/diary/FilterModal.tsx
index a1ac3cc..7bc4abd 100644
--- a/components/diary/FilterModal.tsx
+++ b/components/diary/FilterModal.tsx
@@ -14,6 +14,7 @@ import DateRangePicker from "./DateRangePicker";
 import ShipDropdown from "./ShipDropdown";
 import { TripStatus } from "./types";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 // Map status number to string - now uses i18n
 export function useMapStatusNumberToString() {
@@ -63,6 +64,7 @@ export default function FilterModal({
   onApply,
 }: FilterModalProps) {
   const { t } = useI18n();
+  const { colors } = useThemeContext();
   const mapStatusNumberToString = useMapStatusNumberToString();
   const [status, setStatus] = useState<TripStatus | null>(null);
   const [startDate, setStartDate] = useState<Date | null>(null);
@@ -87,6 +89,42 @@ export default function FilterModal({
     endDate !== null ||
     selectedShip !== null;
 
+  const themedStyles = {
+    modalContainer: {
+      backgroundColor: colors.card,
+    },
+    header: {
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      color: colors.text,
+    },
+    previewContainer: {
+      backgroundColor: colors.backgroundSecondary,
+    },
+    previewTitle: {
+      color: colors.textSecondary,
+    },
+    filterTag: {
+      backgroundColor: colors.primary + '20', // 20% opacity
+    },
+    filterTagText: {
+      color: colors.primary,
+    },
+    footer: {
+      borderTopColor: colors.separator,
+    },
+    resetButton: {
+      backgroundColor: colors.backgroundSecondary,
+    },
+    resetButtonText: {
+      color: colors.textSecondary,
+    },
+    applyButton: {
+      backgroundColor: colors.primary,
+    },
+  };
+
   return (
     <Modal
       visible={visible}
@@ -100,16 +138,16 @@ export default function FilterModal({
         onPress={onClose}
       >
         <TouchableOpacity
-          style={styles.modalContainer}
+          style={[styles.modalContainer, themedStyles.modalContainer]}
           activeOpacity={1}
           onPress={(e) => e.stopPropagation()}
         >
           {/* Header */}
-          <View style={styles.header}>
+          <View style={[styles.header, themedStyles.header]}>
             <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-              <Ionicons name="close" size={24} color="#111827" />
+              <Ionicons name="close" size={24} color={colors.text} />
             </TouchableOpacity>
-            <Text style={styles.title}>{t("diary.filter")}</Text>
+            <Text style={[styles.title, themedStyles.title]}>{t("diary.filter")}</Text>
             <View style={styles.placeholder} />
           </View>
 
@@ -129,32 +167,32 @@ export default function FilterModal({
 
             {/* Filter Results Preview */}
             {hasFilters && (
-              <View style={styles.previewContainer}>
-                <Text style={styles.previewTitle}>{t("diary.selectedFilters")}</Text>
+              <View style={[styles.previewContainer, themedStyles.previewContainer]}>
+                <Text style={[styles.previewTitle, themedStyles.previewTitle]}>{t("diary.selectedFilters")}</Text>
                 {status !== null && (
-                  <View style={styles.filterTag}>
-                    <Text style={styles.filterTagText}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                       {t("diary.statusLabel")} {mapStatusNumberToString(status)}
                     </Text>
                   </View>
                 )}
                 {startDate && (
-                  <View style={styles.filterTag}>
-                    <Text style={styles.filterTagText}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                       {t("diary.fromLabel")} {startDate.toLocaleDateString("vi-VN")}
                     </Text>
                   </View>
                 )}
                 {endDate && (
-                  <View style={styles.filterTag}>
-                    <Text style={styles.filterTagText}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                       {t("diary.toLabel")} {endDate.toLocaleDateString("vi-VN")}
                     </Text>
                   </View>
                 )}
                 {selectedShip && (
-                  <View style={styles.filterTag}>
-                    <Text style={styles.filterTagText}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                       {t("diary.shipLabel")} {selectedShip.shipName}
                     </Text>
                   </View>
@@ -164,16 +202,16 @@ export default function FilterModal({
           </ScrollView>
 
           {/* Footer */}
-          <View style={styles.footer}>
+          <View style={[styles.footer, themedStyles.footer]}>
             <TouchableOpacity
-              style={styles.resetButton}
+              style={[styles.resetButton, themedStyles.resetButton]}
               onPress={handleReset}
               activeOpacity={0.7}
             >
-              <Text style={styles.resetButtonText}>{t("diary.reset")}</Text>
+              <Text style={[styles.resetButtonText, themedStyles.resetButtonText]}>{t("diary.reset")}</Text>
             </TouchableOpacity>
             <TouchableOpacity
-              style={styles.applyButton}
+              style={[styles.applyButton, themedStyles.applyButton]}
               onPress={handleApply}
               activeOpacity={0.7}
             >
@@ -186,6 +224,7 @@ export default function FilterModal({
   );
 }
 
+
 const styles = StyleSheet.create({
   overlay: {
     flex: 1,
@@ -193,7 +232,6 @@ const styles = StyleSheet.create({
     justifyContent: "flex-end",
   },
   modalContainer: {
-    backgroundColor: "#FFFFFF",
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     maxHeight: "80%",
@@ -213,7 +251,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
   },
   closeButton: {
     padding: 4,
@@ -221,7 +258,6 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "700",
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -237,13 +273,11 @@ const styles = StyleSheet.create({
   previewContainer: {
     marginTop: 20,
     padding: 16,
-    backgroundColor: "#F9FAFB",
     borderRadius: 12,
   },
   previewTitle: {
     fontSize: 14,
     fontWeight: "600",
-    color: "#6B7280",
     marginBottom: 12,
     fontFamily: Platform.select({
       ios: "System",
@@ -252,7 +286,6 @@ const styles = StyleSheet.create({
     }),
   },
   filterTag: {
-    backgroundColor: "#EFF6FF",
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderRadius: 16,
@@ -261,7 +294,6 @@ const styles = StyleSheet.create({
   },
   filterTagText: {
     fontSize: 14,
-    color: "#3B82F6",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -273,11 +305,9 @@ const styles = StyleSheet.create({
     gap: 12,
     padding: 20,
     borderTopWidth: 1,
-    borderTopColor: "#F3F4F6",
   },
   resetButton: {
     flex: 1,
-    backgroundColor: "#F3F4F6",
     paddingVertical: 14,
     borderRadius: 12,
     alignItems: "center",
@@ -285,7 +315,6 @@ const styles = StyleSheet.create({
   resetButtonText: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#6B7280",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -294,7 +323,6 @@ const styles = StyleSheet.create({
   },
   applyButton: {
     flex: 1,
-    backgroundColor: "#3B82F6",
     paddingVertical: 14,
     borderRadius: 12,
     alignItems: "center",
diff --git a/components/diary/ShipDropdown.tsx b/components/diary/ShipDropdown.tsx
index dc462db..8948a37 100644
--- a/components/diary/ShipDropdown.tsx
+++ b/components/diary/ShipDropdown.tsx
@@ -12,6 +12,7 @@ import {
 import { Ionicons } from "@expo/vector-icons";
 import { useThings } from "@/state/use-thing";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface ShipOption {
   id: string;
@@ -25,6 +26,7 @@ interface ShipDropdownProps {
 
 export default function ShipDropdown({ value, onChange }: ShipDropdownProps) {
   const { t } = useI18n();
+  const { colors } = useThemeContext();
   const [isOpen, setIsOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
 
@@ -53,18 +55,32 @@ export default function ShipDropdown({ value, onChange }: ShipDropdownProps) {
 
   const displayValue = value ? value.shipName : t("diary.shipDropdown.placeholder");
 
+  const themedStyles = {
+    label: { color: colors.text },
+    selector: { backgroundColor: colors.card, borderColor: colors.border },
+    selectorText: { color: colors.text },
+    placeholder: { color: colors.textSecondary },
+    modalContent: { backgroundColor: colors.card },
+    searchContainer: { backgroundColor: colors.backgroundSecondary, borderColor: colors.border },
+    searchInput: { color: colors.text },
+    option: { borderBottomColor: colors.separator },
+    selectedOption: { backgroundColor: colors.backgroundSecondary },
+    optionText: { color: colors.text },
+    emptyText: { color: colors.textSecondary },
+  };
+
   return (
     <View style={styles.container}>
-      <Text style={styles.label}>{t("diary.shipDropdown.label")}</Text>
+      <Text style={[styles.label, themedStyles.label]}>{t("diary.shipDropdown.label")}</Text>
       <TouchableOpacity
-        style={styles.selector}
+        style={[styles.selector, themedStyles.selector]}
         onPress={() => setIsOpen(true)}
         activeOpacity={0.7}
       >
-        <Text style={[styles.selectorText, !value && styles.placeholder]}>
+        <Text style={[styles.selectorText, themedStyles.selectorText, !value && themedStyles.placeholder]}>
           {displayValue}
         </Text>
-        <Ionicons name="chevron-down" size={20} color="#6B7280" />
+        <Ionicons name="chevron-down" size={20} color={colors.textSecondary} />
       </TouchableOpacity>
 
       <Modal
@@ -79,80 +95,73 @@ export default function ShipDropdown({ value, onChange }: ShipDropdownProps) {
           onPress={() => setIsOpen(false)}
         >
           <View
-            style={styles.modalContent}
+            style={[styles.modalContent, themedStyles.modalContent]}
             onStartShouldSetResponder={() => true}
           >
             {/* Search Input */}
-            <View style={styles.searchContainer}>
+            <View style={[styles.searchContainer, themedStyles.searchContainer]}>
               <Ionicons
                 name="search"
                 size={20}
-                color="#9CA3AF"
+                color={colors.textSecondary}
                 style={styles.searchIcon}
               />
               <TextInput
-                style={styles.searchInput}
+                style={[styles.searchInput, themedStyles.searchInput]}
                 placeholder={t("diary.shipDropdown.searchPlaceholder")}
-                placeholderTextColor="#9CA3AF"
+                placeholderTextColor={colors.textSecondary}
                 value={searchText}
                 onChangeText={setSearchText}
                 autoCapitalize="none"
               />
               {searchText.length > 0 && (
                 <TouchableOpacity onPress={() => setSearchText("")}>
-                  <Ionicons name="close-circle" size={20} color="#9CA3AF" />
+                  <Ionicons name="close-circle" size={20} color={colors.textSecondary} />
                 </TouchableOpacity>
               )}
             </View>
 
             <ScrollView style={styles.optionsList}>
-              {/* Option to clear selection */}
+              {/* "All Ships" option */}
               <TouchableOpacity
-                style={[styles.option, !value && styles.selectedOption]}
+                style={[
+                  styles.option,
+                  themedStyles.option,
+                  !value && themedStyles.selectedOption,
+                ]}
                 onPress={() => handleSelect(null)}
               >
-                <Text
-                  style={[
-                    styles.optionText,
-                    styles.placeholderOption,
-                    !value && styles.selectedOptionText,
-                  ]}
-                >
+                <Text style={[styles.optionText, themedStyles.optionText]}>
                   {t("diary.shipDropdown.allShips")}
                 </Text>
                 {!value && (
-                  <Ionicons name="checkmark" size={20} color="#3B82F6" />
+                  <Ionicons name="checkmark" size={20} color={colors.primary} />
                 )}
               </TouchableOpacity>
 
-              {filteredShips.map((ship) => (
-                <TouchableOpacity
-                  key={ship.id}
-                  style={[
-                    styles.option,
-                    value?.id === ship.id && styles.selectedOption,
-                  ]}
-                  onPress={() => handleSelect(ship)}
-                >
-                  <View style={styles.shipInfo}>
-                    <Text
-                      style={[
-                        styles.shipName,
-                        value?.id === ship.id && styles.selectedOptionText,
-                      ]}
-                    >
+              {/* Filtered ship options */}
+              {filteredShips.length > 0 ? (
+                filteredShips.map((ship) => (
+                  <TouchableOpacity
+                    key={ship.id}
+                    style={[
+                      styles.option,
+                      themedStyles.option,
+                      value?.id === ship.id && themedStyles.selectedOption,
+                    ]}
+                    onPress={() => handleSelect(ship)}
+                  >
+                    <Text style={[styles.optionText, themedStyles.optionText]}>
                       {ship.shipName}
                     </Text>
-                  </View>
-                  {value?.id === ship.id && (
-                    <Ionicons name="checkmark" size={20} color="#3B82F6" />
-                  )}
-                </TouchableOpacity>
-              ))}
-
-              {filteredShips.length === 0 && searchText.length > 0 && (
-                <View style={styles.emptyState}>
-                  <Text style={styles.emptyText}>
+                    {value?.id === ship.id && (
+                      <Ionicons name="checkmark" size={20} color={colors.primary} />
+                    )}
+                  </TouchableOpacity>
+                ))
+              ) : (
+                <View style={styles.emptyContainer}>
+                  <Text style={[styles.emptyText, themedStyles.emptyText]}>
                     {t("diary.shipDropdown.noShipsFound")}
                   </Text>
                 </View>
@@ -172,7 +181,6 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     marginBottom: 8,
     fontFamily: Platform.select({
       ios: "System",
@@ -184,16 +192,13 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    backgroundColor: "#FFFFFF",
     borderWidth: 1,
-    borderColor: "#D1D5DB",
     borderRadius: 8,
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
   selectorText: {
     fontSize: 16,
-    color: "#111827",
     flex: 1,
     fontFamily: Platform.select({
       ios: "System",
@@ -201,9 +206,6 @@ const styles = StyleSheet.create({
       default: "System",
     }),
   },
-  placeholder: {
-    color: "#9CA3AF",
-  },
   modalOverlay: {
     flex: 1,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -211,7 +213,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   modalContent: {
-    backgroundColor: "#FFFFFF",
     borderRadius: 12,
     width: "85%",
     maxHeight: "70%",
@@ -231,8 +232,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
-    backgroundColor: "#F9FAFB",
   },
   searchIcon: {
     marginRight: 8,
@@ -240,7 +239,6 @@ const styles = StyleSheet.create({
   searchInput: {
     flex: 1,
     fontSize: 16,
-    color: "#111827",
     padding: 0,
     fontFamily: Platform.select({
       ios: "System",
@@ -258,58 +256,21 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
-  },
-  selectedOption: {
-    backgroundColor: "#EFF6FF",
   },
   optionText: {
     fontSize: 16,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  placeholderOption: {
-    fontStyle: "italic",
-    color: "#6B7280",
-  },
-  selectedOptionText: {
-    color: "#3B82F6",
-    fontWeight: "600",
-  },
-  shipInfo: {
-    flex: 1,
-  },
-  shipName: {
-    fontSize: 16,
-    color: "#111827",
-    fontWeight: "500",
-    marginBottom: 2,
-    fontFamily: Platform.select({
-      ios: "System",
-      android: "Roboto",
-      default: "System",
-    }),
-  },
-  regNumber: {
-    fontSize: 14,
-    color: "#6B7280",
-    fontFamily: Platform.select({
-      ios: "System",
-      android: "Roboto",
-      default: "System",
-    }),
-  },
-  emptyState: {
+  emptyContainer: {
     paddingVertical: 24,
     alignItems: "center",
   },
   emptyText: {
     fontSize: 14,
-    color: "#9CA3AF",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
diff --git a/components/diary/StatusDropdown.tsx b/components/diary/StatusDropdown.tsx
index 23d332d..2ff7c68 100644
--- a/components/diary/StatusDropdown.tsx
+++ b/components/diary/StatusDropdown.tsx
@@ -11,6 +11,7 @@ import {
 import { Ionicons } from "@expo/vector-icons";
 import { TripStatus } from "./types";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface StatusDropdownProps {
   value: TripStatus | null;
@@ -22,6 +23,7 @@ export default function StatusDropdown({
   onChange,
 }: StatusDropdownProps) {
   const { t } = useI18n();
+  const { colors } = useThemeContext();
   const [isOpen, setIsOpen] = useState(false);
 
   const STATUS_OPTIONS: Array<{ value: TripStatus | null; label: string }> = [
@@ -42,18 +44,29 @@ export default function StatusDropdown({
     setIsOpen(false);
   };
 
+  const themedStyles = {
+    label: { color: colors.text },
+    selector: { backgroundColor: colors.card, borderColor: colors.border },
+    selectorText: { color: colors.text },
+    placeholder: { color: colors.textSecondary },
+    modalContent: { backgroundColor: colors.card },
+    option: { borderBottomColor: colors.separator },
+    selectedOption: { backgroundColor: colors.backgroundSecondary },
+    optionText: { color: colors.text },
+  };
+
   return (
     <View style={styles.container}>
-      <Text style={styles.label}>{t("diary.statusDropdown.label")}</Text>
+      <Text style={[styles.label, themedStyles.label]}>{t("diary.statusDropdown.label")}</Text>
       <TouchableOpacity
-        style={styles.selector}
+        style={[styles.selector, themedStyles.selector]}
         onPress={() => setIsOpen(true)}
         activeOpacity={0.7}
       >
-        <Text style={[styles.selectorText, !value && styles.placeholder]}>
+        <Text style={[styles.selectorText, themedStyles.selectorText, !value && themedStyles.placeholder]}>
           {selectedLabel}
         </Text>
-        <Ionicons name="ellipsis-horizontal" size={20} color="#6B7280" />
+        <Ionicons name="ellipsis-horizontal" size={20} color={colors.textSecondary} />
       </TouchableOpacity>
 
       <Modal
@@ -67,27 +80,28 @@ export default function StatusDropdown({
           activeOpacity={1}
           onPress={() => setIsOpen(false)}
         >
-          <View style={styles.modalContent}>
+          <View style={[styles.modalContent, themedStyles.modalContent]}>
             <ScrollView>
               {STATUS_OPTIONS.map((option, index) => (
                 <TouchableOpacity
                   key={index}
                   style={[
                     styles.option,
-                    value === option.value && styles.selectedOption,
+                    themedStyles.option,
+                    value === option.value && themedStyles.selectedOption,
                   ]}
                   onPress={() => handleSelect(option.value)}
                 >
                   <Text
                     style={[
                       styles.optionText,
-                      value === option.value && styles.selectedOptionText,
+                      themedStyles.optionText,
                     ]}
                   >
                     {option.label}
                   </Text>
                   {value === option.value && (
-                    <Ionicons name="checkmark" size={20} color="#3B82F6" />
+                    <Ionicons name="checkmark" size={20} color={colors.primary} />
                   )}
                 </TouchableOpacity>
               ))}
@@ -106,7 +120,6 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     marginBottom: 8,
     fontFamily: Platform.select({
       ios: "System",
@@ -118,25 +131,19 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    backgroundColor: "#FFFFFF",
     borderWidth: 1,
-    borderColor: "#D1D5DB",
     borderRadius: 8,
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
   selectorText: {
     fontSize: 16,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  placeholder: {
-    color: "#9CA3AF",
-  },
   modalOverlay: {
     flex: 1,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -144,7 +151,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   modalContent: {
-    backgroundColor: "#FFFFFF",
     borderRadius: 12,
     width: "80%",
     maxHeight: "60%",
@@ -165,22 +171,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
-  },
-  selectedOption: {
-    backgroundColor: "#EFF6FF",
   },
   optionText: {
     fontSize: 16,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  selectedOptionText: {
-    color: "#3B82F6",
-    fontWeight: "600",
-  },
 });
diff --git a/components/diary/TripCard.tsx b/components/diary/TripCard.tsx
index 139c1c3..eefcd57 100644
--- a/components/diary/TripCard.tsx
+++ b/components/diary/TripCard.tsx
@@ -11,6 +11,7 @@ import { useTripStatusConfig } from "./types";
 import { useThings } from "@/state/use-thing";
 import dayjs from "dayjs";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface TripCardProps {
   trip: Model.Trip;
@@ -32,6 +33,7 @@ export default function TripCard({
   onDelete,
 }: TripCardProps) {
   const { t } = useI18n();
+  const { colors } = useThemeContext();
   const { things } = useThings();
   const TRIP_STATUS_CONFIG = useTripStatusConfig();
 
@@ -54,8 +56,30 @@ export default function TripCard({
   const showSend = trip.trip_status === 0;
   const showDelete = trip.trip_status === 1;
 
+  const themedStyles = {
+    card: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+    },
+    title: {
+      color: colors.text,
+    },
+    label: {
+      color: colors.textSecondary,
+    },
+    value: {
+      color: colors.text,
+    },
+    divider: {
+      backgroundColor: colors.separator,
+    },
+    actionText: {
+      color: colors.textSecondary,
+    },
+  };
+
   return (
-    <View style={styles.card}>
+    <View style={[styles.card, themedStyles.card]}>
       <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
         {/* Header */}
         <View style={styles.header}>
@@ -66,7 +90,7 @@ export default function TripCard({
               color={statusConfig.textColor}
             />
             <View style={styles.titleContainer}>
-              <Text style={styles.title}>{trip.name}</Text>
+              <Text style={[styles.title, themedStyles.title]}>{trip.name}</Text>
             </View>
           </View>
           <View
@@ -93,15 +117,15 @@ export default function TripCard({
         {/* Info Grid */}
         <View style={styles.infoGrid}>
           <View style={styles.infoRow}>
-            <Text style={styles.label}>{t("diary.tripCard.shipCode")}</Text>
-            <Text style={styles.value}>
+            <Text style={[styles.label, themedStyles.label]}>{t("diary.tripCard.shipCode")}</Text>
+            <Text style={[styles.value, themedStyles.value]}>
               {thingOfTrip?.metadata?.ship_reg_number /* hoặc trip.ship_id */}
             </Text>
           </View>
 
           <View style={styles.infoRow}>
-            <Text style={styles.label}>{t("diary.tripCard.departure")}</Text>
-            <Text style={styles.value}>
+            <Text style={[styles.label, themedStyles.label]}>{t("diary.tripCard.departure")}</Text>
+            <Text style={[styles.value, themedStyles.value]}>
               {trip.departure_time
                 ? dayjs(trip.departure_time).format("DD/MM/YYYY HH:mm")
                 : "-"}
@@ -109,9 +133,9 @@ export default function TripCard({
           </View>
 
           <View style={styles.infoRow}>
-            <Text style={styles.label}>{t("diary.tripCard.return")}</Text>
+            <Text style={[styles.label, themedStyles.label]}>{t("diary.tripCard.return")}</Text>
             {/* FIXME: trip.returnDate không có trong dữ liệu API, cần mapping từ trip.arrival_time */}
-            <Text style={styles.value}>
+            <Text style={[styles.value, themedStyles.value]}>
               {trip.arrival_time
                 ? dayjs(trip.arrival_time).format("DD/MM/YYYY HH:mm")
                 : "-"}
@@ -121,15 +145,15 @@ export default function TripCard({
       </TouchableOpacity>
 
       {/* Action Buttons */}
-      <View style={styles.divider} />
+      <View style={[styles.divider, themedStyles.divider]} />
       <View style={styles.actionsContainer}>
         <TouchableOpacity
           style={styles.actionButton}
           onPress={onView}
           activeOpacity={0.7}
         >
-          <Ionicons name="eye-outline" size={20} color="#6B7280" />
-          <Text style={styles.actionText}>{t("diary.tripCard.view")}</Text>
+          <Ionicons name="eye-outline" size={20} color={colors.textSecondary} />
+          <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.view")}</Text>
         </TouchableOpacity>
 
         {showEdit && (
@@ -138,8 +162,8 @@ export default function TripCard({
             onPress={onEdit}
             activeOpacity={0.7}
           >
-            <Ionicons name="create-outline" size={20} color="#6B7280" />
-            <Text style={styles.actionText}>{t("diary.tripCard.edit")}</Text>
+            <Ionicons name="create-outline" size={20} color={colors.textSecondary} />
+            <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.edit")}</Text>
           </TouchableOpacity>
         )}
 
@@ -148,8 +172,8 @@ export default function TripCard({
           onPress={onTeam}
           activeOpacity={0.7}
         >
-          <Ionicons name="people-outline" size={20} color="#6B7280" />
-          <Text style={styles.actionText}>{t("diary.tripCard.team")}</Text>
+          <Ionicons name="people-outline" size={20} color={colors.textSecondary} />
+          <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.team")}</Text>
         </TouchableOpacity>
 
         {showSend && (
@@ -158,8 +182,8 @@ export default function TripCard({
             onPress={onSend}
             activeOpacity={0.7}
           >
-            <Ionicons name="send-outline" size={20} color="#6B7280" />
-            <Text style={styles.actionText}>{t("diary.tripCard.send")}</Text>
+            <Ionicons name="send-outline" size={20} color={colors.textSecondary} />
+            <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.send")}</Text>
           </TouchableOpacity>
         )}
 
@@ -169,7 +193,7 @@ export default function TripCard({
             onPress={onDelete}
             activeOpacity={0.7}
           >
-            <Ionicons name="trash-outline" size={20} color="#EF4444" />
+            <Ionicons name="trash-outline" size={20} color={colors.error} />
             <Text style={[styles.actionText, styles.deleteText]}>{t("diary.tripCard.delete")}</Text>
           </TouchableOpacity>
         )}
@@ -180,7 +204,6 @@ export default function TripCard({
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: "#FFFFFF",
     borderRadius: 12,
     padding: 16,
     marginBottom: 12,
@@ -193,7 +216,6 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 2,
     borderWidth: 1,
-    borderColor: "#F3F4F6",
   },
   header: {
     flexDirection: "row",
@@ -213,7 +235,6 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     marginBottom: 2,
     fontFamily: Platform.select({
       ios: "System",
@@ -238,15 +259,15 @@ const styles = StyleSheet.create({
   },
   infoGrid: {
     gap: 12,
+    marginBottom: 12,
   },
   infoRow: {
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center",
+    paddingVertical: 8,
   },
   label: {
     fontSize: 14,
-    color: "#6B7280",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -255,9 +276,7 @@ const styles = StyleSheet.create({
   },
   value: {
     fontSize: 14,
-    color: "#111827",
     fontWeight: "500",
-    textAlign: "right",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -266,25 +285,20 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: "#F3F4F6",
-    marginTop: 16,
+    marginVertical: 12,
   },
   actionsContainer: {
     flexDirection: "row",
     justifyContent: "space-around",
-    paddingTop: 12,
+    alignItems: "center",
   },
   actionButton: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
+    gap: 4,
   },
   actionText: {
     fontSize: 14,
-    color: "#6B7280",
-    fontWeight: "500",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",