refactor: implement useNavBackgroundColor hook for dynamic navbar background

- Replaced direct background color logic in Navbar and Sidebar components with useNavBackgroundColor hook for improved maintainability.
- Updated navbar background color variable in index.scss for consistency across components.
- Enhanced handling of background color based on window style and application state.

src/renderer/src/assets/styles/index.scss

@@ -51,7 +51,7 @@
   --color-reference-background: #0b0e12;
 
   --navbar-background-mac: rgba(20, 20, 20, 0.55);
-  --navbar-background: rgba(40, 40, 40);
+  --navbar-background: #1f1f1f;
 
   --navbar-height: 40px;
   --sidebar-width: 50px;

src/renderer/src/components/app/Navbar.tsx

@@ -1,15 +1,12 @@
 import { isMac } from '@renderer/config/constant'
-import { useSettings } from '@renderer/hooks/useSettings'
+import useNavBackgroundColor from '@renderer/hooks/useNavBackgroundColor'
 import { FC, PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
 type Props = PropsWithChildren & JSX.IntrinsicElements['div']
 
 export const Navbar: FC<Props> = ({ children, ...props }) => {
-  const { windowStyle } = useSettings()
+  const backgroundColor = useNavBackgroundColor()
-
-  const macTransparentWindow = isMac && windowStyle === 'transparent'
-  const backgroundColor = macTransparentWindow ? 'transparent' : 'var(--navbar-background)'
 
   return (
     <NavbarContainer {...props} style={{ backgroundColor }}>

src/renderer/src/components/app/Sidebar.tsx

@@ -10,6 +10,7 @@ import { AppLogo, UserAvatar } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import useAvatar from '@renderer/hooks/useAvatar'
 import { useMinapps } from '@renderer/hooks/useMinapps'
+import useNavBackgroundColor from '@renderer/hooks/useNavBackgroundColor'
 import { modelGenerating, useRuntime } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { isEmoji } from '@renderer/utils'
@@ -33,14 +34,13 @@ const Sidebar: FC = () => {
   const { minappShow } = useRuntime()
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { windowStyle, sidebarIcons } = useSettings()
+  const { sidebarIcons } = useSettings()
   const { theme, toggleTheme } = useTheme()
   const { pinned } = useMinapps()
 
   const onEditUser = () => UserPopup.show()
 
-  const macTransparentWindow = isMac && windowStyle === 'transparent'
+  const backgroundColor = useNavBackgroundColor()
-  const sidebarBgColor = macTransparentWindow ? 'transparent' : 'var(--navbar-background)'
 
   const showPinnedApps = pinned.length > 0 && sidebarIcons.visible.includes('minapp')
 
@@ -59,12 +59,7 @@ const Sidebar: FC = () => {
   }
 
   return (
-    <Container
+    <Container id="app-sidebar" style={{ backgroundColor, zIndex: minappShow ? 10000 : 'initial' }}>
-      id="app-sidebar"
-      style={{
-        backgroundColor: sidebarBgColor,
-        zIndex: minappShow ? 10000 : 'initial'
-      }}>
       {isEmoji(avatar) ? (
         <EmojiAvatar onClick={onEditUser}>{avatar}</EmojiAvatar>
       ) : (

src/renderer/src/hooks/useNavBackgroundColor.ts

@@ -0,0 +1,25 @@
+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 (macTransparentWindow) {
+    return 'transparent'
+  }
+
+  if (minappShow) {
+    return theme === 'dark' ? 'var(--navbar-background)' : 'var(--color-white)'
+  }
+
+  return 'var(--navbar-background)'
+}
+
+export default useNavBackgroundColor