cập nhật themes cho tab

2025-12-07 23:09:51 +07:00
parent e405a0bcfa
commit c47d9ad14c
7 changed files with 275 additions and 225 deletions
--- 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",
--- 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({
    }),
  },
 });
+
--- 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",
--- 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",
--- 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",
--- 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",
-  },
 });
--- 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",