Update Explosion plot widget with event counts and add theme support

client/src/pages/home/tabs/MyDashboard.jsx

@@ -3,7 +3,7 @@ import { X, MoreVertical } from "lucide-react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useDashboardStore } from "@/store/useDashboardStore.jsx";
 import { Suspense, useEffect, useRef } from 'react';
-
+import { useColorModeValue } from "@/components/ui/color-mode";
 // 1. Import database messenger
 import useAuthStore from "@/store/authStore";
 
@@ -14,6 +14,12 @@ import { WIDGET_REGISTRY } from '@/constants/widgetRegistry.jsx';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export default function MyDashboard() {
+    // 🌗 Let's adjust for our light and dark mode
+    const frameBg = useColorModeValue("gray.100", "gray.800");
+    const titleColor = useColorModeValue("gray.800", "gray.100");
+    const iconColor = useColorModeValue("gray.600", "gray.400");
+    const iconHoverBg = useColorModeValue("gray.100", "gray.700");
+
     // ☁️ Database Connection
     const { user } = useAuthStore();
 
@@ -67,7 +73,7 @@ export default function MyDashboard() {
 
             return (
                 // The "Frame" that holds both the Title and the Chart
-                <Flex direction="column" height="100%" width="100%" bg="gray.800">
+                <Flex direction="column" height="100%" width="100%" bg={frameBg}>
 
                     {/* THE TITLE BAR */}
                     <Flex
@@ -76,7 +82,7 @@ export default function MyDashboard() {
                         px={3}
                         py={2}
                     >
-                        <Text color="gray.100" fontWeight="semibold" fontSize="md" isTruncated>
+                        <Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
                             {registryEntry.name}
                         </Text>
 
@@ -166,7 +172,7 @@ export default function MyDashboard() {
                                 right={2}
                                 size="xs"
                                 bg="white"
-                                color="gray.400"
+                                color={iconColor}
                                 border="1px solid"
                                 borderColor="gray.200"
                                 _hover={{ bg: "red.50", color: "red.500", borderColor: "red.200" }}