cập nhật themes cho tab

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({
     }),
   },
 });
+