diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts index 0a17967b..fbcb702a 100644 --- a/src/components/layout/use-custom-theme.ts +++ b/src/components/layout/use-custom-theme.ts @@ -52,19 +52,16 @@ export const useCustomTheme = () => { let isMounted = true; - const timerId = setTimeout(() => { - if (!isMounted) return; - appWindow - .theme() - .then((systemTheme) => { - if (isMounted && systemTheme) { - setMode(systemTheme); - } - }) - .catch((err) => { - console.error("Failed to get initial system theme:", err); - }); - }, 0); + appWindow + .theme() + .then((systemTheme) => { + if (isMounted && systemTheme) { + setMode(systemTheme); + } + }) + .catch((err) => { + console.error("Failed to get initial system theme:", err); + }); 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 selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5"; - const scrollColor = mode === "light" ? "#90939980" : "#3E3E3Eee"; + const backgroundColor = mode === "light" ? "#ECECEC" : dt.background_color; + const selectColor = mode === "light" ? "#f5f5f5" : "#3E3E3E"; + 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;