Cập nhật theme cho cảnh báo, giám sát

app/(tabs)/index.tsx

@@ -10,6 +10,7 @@ import ShipSearchForm, {
 import { ThemedText } from "@/components/themed-text";
 import { EVENT_SEARCH_THINGS, IOS_PLATFORM, LIGHT_THEME } from "@/constants";
 import { queryBanzoneById } from "@/controller/MapController";
+import { useAppTheme } from "@/hooks/use-app-theme";
 import { usePlatform } from "@/hooks/use-platform";
 import { useThemeContext } from "@/hooks/use-theme-context";
 import { searchThingEventBus } from "@/services/device_events";
@@ -69,6 +70,7 @@ export default function HomeScreen() {
   const [things, setThings] = useState<Model.ThingsResponse | null>(null);
   const platform = usePlatform();
   const theme = useThemeContext().colorScheme;
+  const { colors } = useAppTheme();
   const scale = useRef(new Animated.Value(0)).current;
   const opacity = useRef(new Animated.Value(1)).current;
   const [shipSearchFormData, setShipSearchFormData] = useState<
@@ -85,7 +87,7 @@ export default function HomeScreen() {
 
   // Alarm list animation
   const screenHeight = Dimensions.get("window").height;
-  const alarmListHeight = Math.round(screenHeight * 0.3);
+  const alarmListHeight = Math.round(screenHeight * 0.4);
   const alarmTranslateY = useRef(new Animated.Value(alarmListHeight)).current;
   const alarmOpacity = useRef(new Animated.Value(0)).current;
   const uiAnim = useRef(new Animated.Value(1)).current; // 1 visible, 0 hidden
@@ -693,6 +695,7 @@ export default function HomeScreen() {
                         fontSize: 20,
                         textAlign: "center",
                         fontWeight: "600",
+                        color: colors.text,
                       }}
                     >
                       Danh sách tàu thuyền
@@ -735,7 +738,7 @@ export default function HomeScreen() {
                                 style={{
                                   width: "50%",
                                   height: 1,
-                                  backgroundColor: "#E5E7EB",
+                                  backgroundColor: colors.separator,
                                   marginVertical: 8,
                                   borderRadius: 1,
                                 }}
@@ -766,22 +769,36 @@ export default function HomeScreen() {
               zIndex: 10,
             }}
           >
-            <View className="bg-white rounded-t-3xl shadow-md overflow-hidden h-full z-50">
+            <View
+              style={{
+                backgroundColor: colors.surface,
+                borderTopLeftRadius: 24,
+                borderTopRightRadius: 24,
+                overflow: "hidden",
+                height: "100%",
+              }}
+            >
               <View className="flex-row items-center justify-between px-4 py-2">
-                <Text className="text-lg font-semibold">
+                <Text
+                  style={{
+                    fontSize: 18,
+                    fontWeight: "600",
+                    color: colors.text,
+                  }}
+                >
                   Danh sách cảnh báo
                 </Text>
                 <TouchableOpacity
                   onPress={() => closeAlarmList()}
                   style={{ padding: 6 }}
                 >
-                  <Ionicons name="close" size={20} color="#374151" />
+                  <Ionicons name="close" size={20} color={colors.icon} />
                 </TouchableOpacity>
               </View>
               <View
                 style={{
                   flex: 1,
-                  backgroundColor: "#F9FAFB",
+                  backgroundColor: colors.backgroundSecondary,
                   zIndex: 50,
                 }}
               >