Adjust styles

src/components/base/base-notice.tsx

@@ -1,19 +1,23 @@
 import { createRoot } from "react-dom/client";
-import { ReactNode, useState } from "react";
+import { ReactNode, useState, useEffect } from "react";
 import { Box, IconButton, Slide, Snackbar, Typography } from "@mui/material";
 import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
-
+import { useVerge } from "@/hooks/use-verge";
+import { appWindow } from "@tauri-apps/api/window";
 interface InnerProps {
   type: string;
   duration?: number;
   message: ReactNode;
+  isDark?: boolean;
   onClose: () => void;
 }
 
 const NoticeInner = (props: InnerProps) => {
   const { type, message, duration = 1500, onClose } = props;
   const [visible, setVisible] = useState(true);
-
+  const [isDark, setIsDark] = useState(false);
+  const { verge } = useVerge();
+  const { theme_mode } = verge ?? {};
   const onBtnClose = () => {
     setVisible(false);
     onClose();
@@ -22,6 +26,26 @@ const NoticeInner = (props: InnerProps) => {
     if (reason !== "clickaway") onBtnClose();
   };
 
+  useEffect(() => {
+    const themeMode = ["light", "dark", "system"].includes(theme_mode!)
+      ? theme_mode!
+      : "light";
+
+    if (themeMode !== "system") {
+      setIsDark(themeMode === "dark");
+      return;
+    }
+
+    appWindow.theme().then((m) => m && setIsDark(m === "dark"));
+    const unlisten = appWindow.onThemeChanged((e) =>
+      setIsDark(e.payload === "dark")
+    );
+
+    return () => {
+      unlisten.then((fn) => fn());
+    };
+  }, [theme_mode]);
+
   const msgElement =
     type === "info" ? (
       message
@@ -46,7 +70,13 @@ const NoticeInner = (props: InnerProps) => {
       autoHideDuration={duration}
       onClose={onAutoClose}
       message={msgElement}
-      sx={{ maxWidth: 360 }}
+      sx={{
+        maxWidth: 360,
+        ".MuiSnackbarContent-root": {
+          bgcolor: isDark ? "#50515C" : "#ffffff",
+          color: isDark ? "#ffffff" : "#000000",
+        },
+      }}
       TransitionComponent={(p) => <Slide {...p} direction="left" />}
       transitionDuration={200}
       action={
@@ -61,9 +91,9 @@ const NoticeInner = (props: InnerProps) => {
 interface NoticeInstance {
   (props: Omit<InnerProps, "onClose">): void;
 
-  info(message: ReactNode, duration?: number): void;
-  error(message: ReactNode, duration?: number): void;
-  success(message: ReactNode, duration?: number): void;
+  info(message: ReactNode, duration?: number, isDark?: boolean): void;
+  error(message: ReactNode, duration?: number, isDark?: boolean): void;
+  success(message: ReactNode, duration?: number, isDark?: boolean): void;
 }
 
 let parent: HTMLDivElement = null!;