cập nhật themes cho tab

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",