fix: theme color on connection detail card

fix: home page clash info card proxy address

src/components/connection/connection-detail.tsx

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useLockFn } from "ahooks";
-import { Box, Button, Snackbar } from "@mui/material";
+import { Box, Button, Snackbar, useTheme } from "@mui/material";
 import { deleteConnection } from "@/services/api";
 import parseTraffic from "@/utils/parse-traffic";
 import { t } from "i18next";
@@ -14,6 +14,7 @@ export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
   (props, ref) => {
     const [open, setOpen] = useState(false);
     const [detail, setDetail] = useState<IConnectionsItem>(null!);
+    const theme = useTheme();
 
     useImperativeHandle(ref, () => ({
       open: (detail: IConnectionsItem) => {
@@ -35,6 +36,8 @@ export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
             maxWidth: "520px",
             maxHeight: "480px",
             overflowY: "auto",
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.primary,
           },
         }}
         message={
@@ -54,6 +57,7 @@ interface InnerProps {
 
 const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
   const { metadata, rulePayload } = data;
+  const theme = useTheme();
   const chains = [...data.chains].reverse().join(" / ");
   const rule = rulePayload ? `${data.rule}(${rulePayload})` : data.rule;
   const host = metadata.host
@@ -99,11 +103,11 @@ const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
   const onDelete = useLockFn(async () => deleteConnection(data.id));
 
   return (
-    <Box sx={{ userSelect: "text" }}>
+    <Box sx={{ userSelect: "text", color: theme.palette.text.secondary }}>
       {information.map((each) => (
         <div key={each.label}>
           <b>{each.label}</b>
-          <span style={{ wordBreak: "break-all" }}>: {each.value}</span>
+          <span style={{ wordBreak: "break-all", color: theme.palette.text.primary }}>: {each.value}</span>
         </div>
       ))}