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

components/DraggablePanel.tsx

@@ -1,3 +1,4 @@
+import { useAppTheme } from "@/hooks/use-app-theme";
 import { Ionicons } from "@expo/vector-icons";
 import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import React, { useEffect, useState } from "react";
@@ -36,6 +37,7 @@ export default function DraggablePanel({
 }: DraggablePanelProps) {
   const { height: screenHeight } = useWindowDimensions();
   const bottomOffset = useBottomTabBarHeight();
+  const { colors } = useAppTheme();
 
   const minHeight = screenHeight * minHeightPct;
   const maxHeight = screenHeight * maxHeightPct;
@@ -141,7 +143,12 @@ export default function DraggablePanel({
 
   return (
     <Animated.View style={[styles.panelContainer, animatedStyle]}>
-      <View style={[styles.panel, { height: maxHeight }]}>
+      <View
+        style={[
+          styles.panel,
+          { height: maxHeight, backgroundColor: colors.surface },
+        ]}
+      >
         {/* Header với drag handle và nút toggle */}
         <GestureDetector gesture={panGesture}>
           <Pressable onPress={togglePanel} style={styles.header}>
@@ -151,7 +158,7 @@ export default function DraggablePanel({
               style={styles.toggleButton}
               hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
             >
-              <Ionicons name={iconName} size={24} color="#666" />
+              <Ionicons name={iconName} size={24} color={colors.icon} />
             </TouchableOpacity>
           </Pressable>
         </GestureDetector>