chore: fix connection table bg

src/components/connection/connection-table.tsx

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import { useMemo, useState } from "react";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { useThemeMode } from "@/services/states";
 import { truncateStr } from "@/utils/truncate-str";
 import parseTraffic from "@/utils/parse-traffic";
 import { t } from "i18next";
@@ -12,6 +13,9 @@ interface Props {
 
 export const ConnectionTable = (props: Props) => {
   const { connections, onShowDetail } = props;
+  const mode = useThemeMode();
+  const isDark = mode === "light" ? false : true;
+  const backgroundColor = isDark ? "#282A36" : "#ffffff";
 
   const [columnVisible, setColumnVisible] = useState<
     Partial<Record<keyof IConnectionsItem, boolean>>
@@ -96,7 +100,6 @@ export const ConnectionTable = (props: Props) => {
         source: `${metadata.sourceIP}:${metadata.sourcePort}`,
         destinationIP: metadata.destinationIP,
         type: `${metadata.type}(${metadata.network})`,
-
         connectionData: each,
       };
     });
@@ -112,8 +115,8 @@ export const ConnectionTable = (props: Props) => {
       sx={{
         border: "none",
         "div:focus": { outline: "none !important" },
-        "& div[aria-rowindex='1']": {
-          backgroundColor: "inherit !important",
+        "& div[aria-rowindex]": {
+          backgroundColor: `${backgroundColor} !important`,
         },
       }}
       columnVisibilityModel={columnVisible}