Refactor status bar theme handling, attempt to remove the black spaces

src/hooks/useStatusBar.js

@@ -1,5 +1,6 @@
 import { useColorScheme } from '@mui/joy'
 import { useEffect } from 'react'
+
 import statusBarManager from '../utils/StatusBarManager'
 
 /**
@@ -35,10 +36,7 @@ export const useStatusBar = () => {
 
       // Update the status bar with the resolved theme
       await statusBarManager.updateResolvedTheme(resolvedTheme)
-      
-      // Also update the base theme for future reference
-      await statusBarManager.setTheme(mode)
-      
+
       // Notify any custom listeners
       statusBarManager.notifyThemeChange(resolvedTheme)
     }

src/utils/StatusBarManager.js

@@ -52,14 +52,12 @@ class StatusBarManager {
     this.currentTheme = theme
 
     try {
-      let style = Style.Light // Default to light content (dark status bar)
+      let style = Style.Light // Dark content for a light background
 
       if (theme === 'dark') {
-        style = Style.Dark // Dark content (light status bar)
+        style = Style.Dark // Light content for a dark background
       } else if (theme === 'system') {
-        // For system theme, we need to detect the actual system preference
-        // Joy UI's useColorScheme will handle this, but we default to light
-        style = Style.Light
+        style = Style.Default
       }
 
       await StatusBar.setStyle({ style })