fix(ui): allow DefaultTheme "Auto" from config (#5190)

* fix(ui): allow DefaultTheme "Auto" from config

When DefaultTheme is set to "Auto" in the server config, the
defaultTheme() function in themeReducer now returns AUTO_THEME_ID
instead of falling through to the DarkTheme fallback.

This allows useCurrentTheme to correctly read prefers-color-scheme
and select Light or Dark theme automatically for new/incognito users.

Adds themeReducer unit tests covering Auto, named-theme, and
unrecognized-value fallback paths.

* chore: format

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

---------

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

ui/src/consts.js

@@ -7,6 +7,8 @@ export const M3U_MIME_TYPE = 'audio/x-mpegurl'
 
 export const AUTO_THEME_ID = 'AUTO_THEME_ID'
 
+export const AUTO_THEME_CONFIG_VALUE = 'Auto'
+
 export const DraggableTypes = {
   SONG: 'song',
   ALBUM: 'album',

ui/src/reducers/themeReducer.js

@@ -1,8 +1,12 @@
 import { CHANGE_THEME } from '../actions'
+import { AUTO_THEME_ID, AUTO_THEME_CONFIG_VALUE } from '../consts'
 import config from '../config'
 import themes from '../themes'
 
 const defaultTheme = () => {
+  if (config.defaultTheme === AUTO_THEME_CONFIG_VALUE) {
+    return AUTO_THEME_ID
+  }
   return (
     Object.keys(themes).find(
       (t) => themes[t].themeName === config.defaultTheme,

ui/src/reducers/themeReducer.test.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { AUTO_THEME_ID, AUTO_THEME_CONFIG_VALUE } from '../consts'
+
+describe('themeReducer', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  it.each([
+    {
+      configTheme: AUTO_THEME_CONFIG_VALUE,
+      expected: AUTO_THEME_ID,
+      description: 'is "Auto"',
+    },
+    { configTheme: 'Dark', expected: 'DarkTheme', description: 'is "Dark"' },
+    {
+      configTheme: 'NonExistent',
+      expected: 'DarkTheme',
+      description: 'is unrecognized',
+    },
+  ])(
+    'returns $expected when defaultTheme config $description',
+    async ({ configTheme, expected }) => {
+      vi.doMock('../config', () => ({
+        default: { defaultTheme: configTheme },
+      }))
+      const { themeReducer } = await import('./themeReducer')
+      const result = themeReducer(undefined, { type: 'UNKNOWN' })
+      expect(result).toBe(expected)
+    },
+  )
+})