fix(ui): sync body background color with theme

Set document.body.style.backgroundColor to match the current theme's background
color whenever the theme changes. This fixes the white background that appeared
during pull-to-refresh gestures on mobile or overscroll on desktop, where the
browser reveals the area behind the app content.

The background color is determined by the theme's palette.background.default
value if defined, otherwise falls back to Material-UI defaults (#303030 for
dark themes, #fafafa for light themes).

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/themes/useCurrentTheme.js

@@ -42,6 +42,12 @@ const useCurrentTheme = () => {
         document.head.removeChild(style)
       }
     }
+
+    // Set body background color to match theme (fixes white background on pull-to-refresh)
+    const isDark = theme.palette?.type === 'dark'
+    const bgColor =
+      theme.palette?.background?.default || (isDark ? '#303030' : '#fafafa')
+    document.body.style.backgroundColor = bgColor
   }, [theme])
 
   return theme

ui/src/themes/useCurrentTheme.test.jsx

@@ -15,6 +15,10 @@ function createMatchMedia(theme) {
   })
 }
 
+beforeEach(() => {
+  document.body.style.backgroundColor = ''
+})
+
 describe('useCurrentTheme', () => {
   describe('with user preference theme as light', () => {
     beforeAll(() => {
@@ -117,4 +121,44 @@ describe('useCurrentTheme', () => {
       expect(result.current.themeName).toMatch('Spotify-ish')
     })
   })
+  describe('body background color', () => {
+    beforeAll(() => {
+      window.matchMedia = createMatchMedia('dark')
+    })
+    it('sets body background for dark theme', () => {
+      renderHook(() => useCurrentTheme(), {
+        wrapper: ({ children }) => (
+          <Provider store={createStore(themeReducer, { theme: 'DarkTheme' })}>
+            {children}
+          </Provider>
+        ),
+      })
+      // Dark theme uses MUI default dark background
+      expect(document.body.style.backgroundColor).toBe('rgb(48, 48, 48)')
+    })
+    it('sets body background for light theme', () => {
+      renderHook(() => useCurrentTheme(), {
+        wrapper: ({ children }) => (
+          <Provider store={createStore(themeReducer, { theme: 'LightTheme' })}>
+            {children}
+          </Provider>
+        ),
+      })
+      // Light theme uses MUI default light background
+      expect(document.body.style.backgroundColor).toBe('rgb(250, 250, 250)')
+    })
+    it('sets body background for theme with custom background', () => {
+      renderHook(() => useCurrentTheme(), {
+        wrapper: ({ children }) => (
+          <Provider
+            store={createStore(themeReducer, { theme: 'SpotifyTheme' })}
+          >
+            {children}
+          </Provider>
+        ),
+      })
+      // Spotify theme has explicit background.default: #121212
+      expect(document.body.style.backgroundColor).toBe('rgb(18, 18, 18)')
+    })
+  })
 })