fix(MinApp): integrate dynamic background color for MinappPopupContainer (#5142)

src/renderer/src/components/MinApp/MinappPopupContainer.tsx

@@ -12,6 +12,7 @@ import { DEFAULT_MIN_APPS } from '@renderer/config/minapps'
 import { useBridge } from '@renderer/hooks/useBridge'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
 import { useMinapps } from '@renderer/hooks/useMinapps'
+import useNavBackgroundColor from '@renderer/hooks/useNavBackgroundColor'
 import { useRuntime } from '@renderer/hooks/useRuntime'
 import { MinAppType } from '@renderer/types'
 import { delay } from '@renderer/utils'
@@ -38,6 +39,7 @@ const MinappPopupContainer: React.FC = () => {
   const { closeMinapp, hideMinappPopup } = useMinappPopup()
   const { pinned, updatePinnedMinapps } = useMinapps()
   const { t } = useTranslation()
+  const backgroundColor = useNavBackgroundColor()
 
   /** control the drawer open or close */
   const [isPopupShow, setIsPopupShow] = useState(true)
@@ -236,7 +238,7 @@ const MinappPopupContainer: React.FC = () => {
     }
 
     return (
-      <TitleContainer style={{ justifyContent: 'space-between' }}>
+      <TitleContainer style={{ backgroundColor: backgroundColor, justifyContent: 'space-between' }}>
         <Tooltip
           title={
             <TitleTextTooltip>

src/renderer/src/hooks/useNavBackgroundColor.ts

@@ -1,20 +1,12 @@
 import { isMac } from '@renderer/config/constant'
-import { useTheme } from '@renderer/context/ThemeProvider'
 
-import { useRuntime } from './useRuntime'
 import { useSettings } from './useSettings'
 
 function useNavBackgroundColor() {
   const { windowStyle } = useSettings()
-  const { theme } = useTheme()
-  const { minappShow } = useRuntime()
 
   const macTransparentWindow = isMac && windowStyle === 'transparent'
 
-  if (minappShow) {
-    return theme === 'dark' ? 'var(--navbar-background)' : 'var(--color-white)'
-  }
-
   if (macTransparentWindow) {
     return 'transparent'
   }