From c42570446b80d019840c59ba962da28c781cc76d Mon Sep 17 00:00:00 2001
From: Tom Boucher <trekkie@nomorestars.com>
Date: Sun, 15 Mar 2026 14:00:21 -0400
Subject: [PATCH] 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                     |  2 ++
 ui/src/reducers/themeReducer.js      |  4 ++++
 ui/src/reducers/themeReducer.test.js | 32 ++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 ui/src/reducers/themeReducer.test.js

diff --git a/ui/src/consts.js b/ui/src/consts.js
index e3446c2f..30731a08 100644
--- a/ui/src/consts.js
+++ b/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',
diff --git a/ui/src/reducers/themeReducer.js b/ui/src/reducers/themeReducer.js
index 2a5d5bac..16d5fa87 100644
--- a/ui/src/reducers/themeReducer.js
+++ b/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,
diff --git a/ui/src/reducers/themeReducer.test.js b/ui/src/reducers/themeReducer.test.js
new file mode 100644
index 00000000..2a66ea85
--- /dev/null
+++ b/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)
+    },
+  )
+})