fix:Linux displays white boxes, white dots and white bars (#3785)

Co-authored-by: Ahao <108321411+xuanyuan0408@users.noreply.github.com>
Co-authored-by: Tunglies <selenvow+github@gmail.com>

src/components/layout/use-custom-theme.ts

@@ -52,19 +52,16 @@ export const useCustomTheme = () => {
 
     let isMounted = true;
 
-    const timerId = setTimeout(() => {
+    appWindow
-      if (!isMounted) return;
+      .theme()
-      appWindow
+      .then((systemTheme) => {
-        .theme()
+        if (isMounted && systemTheme) {
-        .then((systemTheme) => {
+          setMode(systemTheme);
-          if (isMounted && systemTheme) {
+        }
-            setMode(systemTheme);
+      })
-          }
+      .catch((err) => {
-        })
+        console.error("Failed to get initial system theme:", err);
-        .catch((err) => {
+      });
-          console.error("Failed to get initial system theme:", err);
-        });
-    }, 0);
 
     const unlistenPromise = appWindow.onThemeChanged(({ payload }) => {
       if (isMounted) {
@@ -74,7 +71,6 @@ export const useCustomTheme = () => {
 
     return () => {
       isMounted = false;
-      clearTimeout(timerId);
       unlistenPromise
         .then((unlistenFn) => {
           if (typeof unlistenFn === "function") {
@@ -131,6 +127,7 @@ export const useCustomTheme = () => {
             },
             background: {
               paper: dt.background_color,
+              default: dt.background_color,
             },
           },
           shadows: Array(25).fill("none") as Shadows,
@@ -157,6 +154,10 @@ export const useCustomTheme = () => {
           warning: { main: dt.warning_color },
           success: { main: dt.success_color },
           text: { primary: dt.primary_text, secondary: dt.secondary_text },
+          background: {
+            paper: dt.background_color,
+            default: dt.background_color,
+          },
         },
         typography: { fontFamily: dt.font_family },
       });
@@ -164,9 +165,9 @@ export const useCustomTheme = () => {
 
     const rootEle = document.documentElement;
     if (rootEle) {
-      const backgroundColor = mode === "light" ? "#ECECEC" : "#2e303d";
+      const backgroundColor = mode === "light" ? "#ECECEC" : dt.background_color;
-      const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
+      const selectColor = mode === "light" ? "#f5f5f5" : "#3E3E3E";
-      const scrollColor = mode === "light" ? "#90939980" : "#3E3E3Eee";
+      const scrollColor = mode === "light" ? "#90939980" : "#555555";
       const dividerColor =
         mode === "light" ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.06)";
 
@@ -182,16 +183,59 @@ export const useCustomTheme = () => {
         "--background-color-alpha",
         alpha(muiTheme.palette.primary.main, 0.1),
       );
+      // 添加CSS变量
+      rootEle.style.setProperty("--window-border-color", mode === "light" ? "#cccccc" : "#1E1E1E");
+      rootEle.style.setProperty("--scrollbar-bg", mode === "light" ? "#f1f1f1" : "#2E303D");
+      rootEle.style.setProperty("--scrollbar-thumb", mode === "light" ? "#c1c1c1" : "#555555");
     }
-    // inject css
+
     let styleElement = document.querySelector("style#verge-theme");
     if (!styleElement) {
       styleElement = document.createElement("style");
       styleElement.id = "verge-theme";
       document.head.appendChild(styleElement!);
     }
+
     if (styleElement) {
-      styleElement.innerHTML = setting.css_injection || "";
+      // 添加全局样式，确保所有元素都使用暗色主题
+      const globalStyles = `
+        /* 修复滚动条样式 */
+        ::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+          background-color: var(--scrollbar-bg);
+        }
+        ::-webkit-scrollbar-thumb {
+          background-color: var(--scrollbar-thumb);
+          border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background-color: ${mode === "light" ? "#a1a1a1" : "#666666"};
+        }
+
+        /* 确保所有元素都使用正确的背景色 */
+        body, html {
+          background-color: var(--background-color) !important;
+        }
+
+        /* 修复可能的白色边框 */
+        .MuiPaper-root {
+          border-color: var(--window-border-color) !important;
+        }
+
+        /* 确保模态框和对话框也使用暗色主题 */
+        .MuiDialog-paper {
+          background-color: ${mode === "light" ? "#ffffff" : "#2E303D"} !important;
+        }
+
+        /* 移除可能的白色点或线条 */
+        * {
+          outline: none !important;
+          box-shadow: none !important;
+        }
+      `;
+
+      styleElement.innerHTML = (setting.css_injection || "") + globalStyles;
     }
 
     const { palette } = muiTheme;