fix: theme loading when no matching theme found

changelog/unreleased/bugfix-theme-loading-without-matching-theme

@@ -0,0 +1,6 @@
+Bugfix: Theme loading without matching theme
+
+We've fixed an issue where theme loading would break when there was no matching oC theme found for the user's OS setting. For example, this occurred when a user's OS setting was configured to "dark," but the instance of oC did not offer a dark theme.
+
+https://github.com/owncloud/web/issues/10657
+https://github.com/owncloud/web/pull/10659

packages/web-pkg/src/composables/piniaStores/theme.ts

@@ -77,7 +77,7 @@ export const ThemingConfig = z.object({
 })
 
 type WebThemeType = z.infer<typeof WebTheme>
-type WebThemeConfigType = z.infer<typeof WebThemeConfig>
+export type WebThemeConfigType = z.infer<typeof WebThemeConfig>
 
 const themeStorageKey = 'oc_currentThemeName'
 
@@ -104,7 +104,9 @@ export const useThemeStore = defineStore('theme', () => {
     availableThemes.value = themeConfig.themes.map((theme) => merge(themeConfig.defaults, theme))
 
     if (unref(currentThemeName) === null) {
-      currentThemeName.value = unref(availableThemes).find((t) => t.isDark === unref(isDark)).name
+      const theme =
+        unref(availableThemes).find((t) => t.isDark === unref(isDark)) || unref(availableThemes)[0]
+      currentThemeName.value = theme.name
     }
 
     setAndApplyTheme(

packages/web-pkg/tests/unit/composables/piniaStores/theme.spec.ts

@@ -0,0 +1,82 @@
+import { useLocalStorage, usePreferredDark } from '@vueuse/core'
+import { useThemeStore, WebThemeConfigType } from '../../../../src/composables/piniaStores'
+import { mockDeep } from 'jest-mock-extended'
+import { createPinia, setActivePinia } from 'pinia'
+import { ref } from 'vue'
+
+jest.mock('@vueuse/core', () => {
+  return { useLocalStorage: jest.fn(() => ref('')), usePreferredDark: jest.fn(() => ref(false)) }
+})
+
+describe('useThemeStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('initializeThemes', () => {
+    it('sets availableThemes', () => {
+      const themeConfig = mockDeep<WebThemeConfigType>()
+      themeConfig.themes = [
+        { name: 'light', designTokens: {}, isDark: false },
+        { name: 'dark', designTokens: {}, isDark: true }
+      ]
+
+      const store = useThemeStore()
+      store.initializeThemes(themeConfig)
+
+      expect(store.availableThemes.length).toBe(themeConfig.themes.length)
+    })
+    describe('currentTheme', () => {
+      it.each([true, false])('gets set based on the OS setting', (isDark) => {
+        jest.mocked(usePreferredDark).mockReturnValue(ref(isDark))
+        jest.mocked(useLocalStorage).mockReturnValue(ref(null))
+
+        const themeConfig = mockDeep<WebThemeConfigType>()
+        themeConfig.themes = [
+          { name: 'light', designTokens: {}, isDark: false },
+          { name: 'dark', designTokens: {}, isDark: true }
+        ]
+        themeConfig.defaults = {}
+
+        const store = useThemeStore()
+        store.initializeThemes(themeConfig)
+
+        expect(store.currentTheme.name).toEqual(
+          themeConfig.themes.find((t) => t.isDark === isDark).name
+        )
+      })
+      it('falls back to the first theme if no match for the OS setting is found', () => {
+        jest.mocked(usePreferredDark).mockReturnValue(ref(true))
+        jest.mocked(useLocalStorage).mockReturnValue(ref(null))
+
+        const themeConfig = mockDeep<WebThemeConfigType>()
+        themeConfig.themes = [{ name: 'light', designTokens: {}, isDark: false }]
+        themeConfig.defaults = {}
+
+        const store = useThemeStore()
+        store.initializeThemes(themeConfig)
+
+        expect(store.currentTheme.name).toEqual('light')
+      })
+    })
+    describe('toggleTheme', () => {
+      it('toggles the themes between light and dark mode', () => {
+        const themeConfig = mockDeep<WebThemeConfigType>()
+        themeConfig.defaults = {}
+        themeConfig.themes = [
+          { name: 'light', designTokens: {}, isDark: false },
+          { name: 'dark', designTokens: {}, isDark: true }
+        ]
+
+        const store = useThemeStore()
+        store.initializeThemes(themeConfig)
+
+        expect(store.currentTheme.name).toEqual('light')
+
+        store.toggleTheme()
+
+        expect(store.currentTheme.name).toEqual('dark')
+      })
+    })
+  })
+})