From 142b624001cde3b23a8abf9eee1e2f3b626c98b3 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sat, 14 Jun 2025 10:36:45 +0800
Subject: [PATCH] feat(ThemeProvider, color.scss, useAppInit): integrate
 transparent window settings and update styles

---
 src/renderer/src/assets/styles/color.scss  | 5 +++++
 src/renderer/src/context/ThemeProvider.tsx | 5 +++--
 src/renderer/src/hooks/useAppInit.ts       | 4 +---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss
index 5e87a1c0b5..829c58c146 100644
--- a/src/renderer/src/assets/styles/color.scss
+++ b/src/renderer/src/assets/styles/color.scss
@@ -140,3 +140,8 @@
 
   --border-width: 0.5px;
 }
+
+[transparent-window='false'] {
+  --color-list-item: var(--color-background-mute);
+  --color-list-item-hover: var(--color-background-soft);
+}
diff --git a/src/renderer/src/context/ThemeProvider.tsx b/src/renderer/src/context/ThemeProvider.tsx
index 85b0dbae86..2830ece884 100644
--- a/src/renderer/src/context/ThemeProvider.tsx
+++ b/src/renderer/src/context/ThemeProvider.tsx
@@ -23,7 +23,7 @@ interface ThemeProviderProps extends PropsWithChildren {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   // 用户设置的主题
-  const { theme: settedTheme, setTheme: setSettedTheme } = useSettings()
+  const { theme: settedTheme, setTheme: setSettedTheme, transparentWindow } = useSettings()
   const [actualTheme, setActualTheme] = useState<ThemeMode>(
     window.matchMedia('(prefers-color-scheme: dark)').matches ? ThemeMode.dark : ThemeMode.light
   )
@@ -42,6 +42,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     // Set initial theme and OS attributes on body
     document.body.setAttribute('os', isMac ? 'mac' : 'windows')
     document.body.setAttribute('theme-mode', actualTheme)
+    document.body.setAttribute('transparent-window', transparentWindow ? 'true' : 'false')
 
     // if theme is old auto, then set theme to system
     // we can delete this after next big release
@@ -56,7 +57,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
       document.body.setAttribute('theme-mode', actualTheme)
       setActualTheme(actualTheme)
     })
-  }, [actualTheme, initUserTheme, setSettedTheme, settedTheme])
+  }, [actualTheme, initUserTheme, setSettedTheme, settedTheme, transparentWindow])
 
   useEffect(() => {
     window.api.setTheme(settedTheme)
diff --git a/src/renderer/src/hooks/useAppInit.ts b/src/renderer/src/hooks/useAppInit.ts
index 7b56321b03..d068197f91 100644
--- a/src/renderer/src/hooks/useAppInit.ts
+++ b/src/renderer/src/hooks/useAppInit.ts
@@ -62,14 +62,12 @@ export function useAppInit() {
   }, [language])
 
   useEffect(() => {
-    const transparentWindow = !minappShow
-
     if (minappShow) {
       window.root.style.background = 'var(--color-background)'
       return
     }
 
-    window.root.style.background = transparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
+    window.root.style.background = !minappShow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
   }, [minappShow, theme])
 
   useEffect(() => {