From 136e64e981b63a66594cea028e037ed5a0810d9a Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 Jan 2024 13:20:08 +0100
Subject: [PATCH 01/10] ThemeSwitcher refactoring followup

---
 .../src/components/{Topbar => }/ThemeSwitcher.vue      | 10 ++++++----
 packages/web-runtime/src/pages/account.vue             |  9 ++-------
 2 files changed, 8 insertions(+), 11 deletions(-)
 rename packages/web-runtime/src/components/{Topbar => }/ThemeSwitcher.vue (75%)

diff --git a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue b/packages/web-runtime/src/components/ThemeSwitcher.vue
similarity index 75%
rename from packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
rename to packages/web-runtime/src/components/ThemeSwitcher.vue
index e0e9a686eb4..15073bf2972 100644
--- a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/ThemeSwitcher.vue
@@ -11,19 +11,21 @@
 </template>
 <script lang="ts">
 import { defineComponent, unref } from 'vue'
-import { useThemeStore, WebThemeType } from '@ownclouders/web-pkg'
+import { useMessages, useThemeStore, WebThemeType } from '@ownclouders/web-pkg'
 import { storeToRefs } from 'pinia'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
-  emits: ['update'],
-  setup(props, { emit }) {
+  setup() {
     const themeStore = useThemeStore()
+    const { showMessage } = useMessages()
+    const { $gettext } = useGettext()
 
     const { setAndApplyTheme } = themeStore
 
     const updateTheme = (newTheme: WebThemeType) => {
       setAndApplyTheme(newTheme)
-      emit('update')
+      showMessage({ title: $gettext('Preference saved.') })
     }
 
     const { availableThemes, currentTheme } = storeToRefs(themeStore)
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index f656e8853f4..431a1e749d2 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -107,7 +107,7 @@
         <div class="account-page-info-theme oc-mb oc-width-1-2@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Theme')" />
           <dd data-testid="theme" class="oc-width-1-3">
-            <theme-switcher @update="onUpdateTheme" />
+            <theme-switcher />
           </dd>
         </div>
         <div v-if="showNotifications" class="account-page-notification oc-mb oc-width-1-2@s">
@@ -406,10 +406,6 @@ export default defineComponent({
       }
     }
 
-    const onUpdateTheme = () => {
-      showMessage({ title: $gettext('Preference saved.') })
-    }
-
     onMounted(async () => {
       await loadAccountBundleTask.perform()
       await loadValuesListTask.perform()
@@ -459,8 +455,7 @@ export default defineComponent({
       loadAccountBundleTask,
       loadGraphUserTask,
       loadValuesListTask,
-      showEditPasswordModal,
-      onUpdateTheme
+      showEditPasswordModal
     }
   },
   computed: {

From 67417b94b03f21b4f6bf09ab2abb2e5716044f62 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 Jan 2024 13:24:49 +0100
Subject: [PATCH 02/10] Update changelog, update import, fix tests

---
 changelog/unreleased/enhancement-move-theme-switcher            | 1 +
 packages/web-runtime/src/pages/account.vue                      | 2 +-
 .../tests/unit/components/Topbar/ThemeSwitcher.spec.ts          | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/changelog/unreleased/enhancement-move-theme-switcher b/changelog/unreleased/enhancement-move-theme-switcher
index c0100fd4daf..ba626381d6d 100644
--- a/changelog/unreleased/enhancement-move-theme-switcher
+++ b/changelog/unreleased/enhancement-move-theme-switcher
@@ -3,4 +3,5 @@ Enhancement: Move ThemeSwitcher into Account Settings
 We've moved the ThemeSwitcher to the account settings page.
 
 https://github.com/owncloud/web/pull/10334
+https://github.com/owncloud/web/pull/10342
 https://github.com/owncloud/web/issues/10181
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 431a1e749d2..32d315009de 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -163,7 +163,7 @@ import { AppLoadingSpinner } from '@ownclouders/web-pkg'
 import { SSEAdapter } from '@ownclouders/web-client/src/sse'
 import { supportedLanguages } from '../defaults/languages'
 import { User } from '@ownclouders/web-client/src/generated'
-import ThemeSwitcher from 'web-runtime/src/components/Topbar/ThemeSwitcher.vue'
+import ThemeSwitcher from 'web-runtime/src/components/ThemeSwitcher.vue'
 
 export default defineComponent({
   name: 'AccountPage',
diff --git a/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
index 3eea186b0dd..6d84d47dec0 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
@@ -1,6 +1,6 @@
 import { WebThemeType, useThemeStore } from '@ownclouders/web-pkg'
 import { mock } from 'jest-mock-extended'
-import ThemeSwitcher from 'web-runtime/src/components/Topbar/ThemeSwitcher.vue'
+import ThemeSwitcher from 'web-runtime/src/components/ThemeSwitcher.vue'
 import defaultTheme from 'web-runtime/themes/owncloud/theme.json'
 import { defaultPlugins, defaultStubs, mount } from 'web-test-helpers'
 

From e103526faa1b07b99137633463fa4a72bbbef05c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 Jan 2024 13:55:10 +0100
Subject: [PATCH 03/10] Add auto theme option (localStorage still wrong)

---
 .../src/composables/piniaStores/theme.ts      | 14 +++++++--
 .../src/components/ThemeSwitcher.vue          | 29 ++++++++++++-------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index ed4539cfd4b..63609ea0807 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -1,6 +1,6 @@
 import merge from 'deepmerge'
 import { defineStore } from 'pinia'
-import { ref, unref } from 'vue'
+import { computed, ref, unref } from 'vue'
 import { useLocalStorage, usePreferredDark } from '@vueuse/core'
 import { z } from 'zod'
 import { applyCustomProp } from 'design-system/src/'
@@ -104,6 +104,14 @@ export const useThemeStore = defineStore('theme', () => {
     )
   }
 
+  const setAutoSystemTheme = () => {
+    currentLocalStorageThemeName.value = null
+  }
+
+  const isCurrentThemeAutoSystem = computed(() => {
+    return currentLocalStorageThemeName.value == null
+  })
+
   const setAndApplyTheme = (theme: WebThemeType) => {
     currentTheme.value = theme
     currentLocalStorageThemeName.value = unref(currentTheme).name
@@ -132,6 +140,8 @@ export const useThemeStore = defineStore('theme', () => {
     availableThemes,
     currentTheme,
     initializeThemes,
-    setAndApplyTheme
+    setAndApplyTheme,
+    setAutoSystemTheme,
+    isCurrentThemeAutoSystem
   }
 })
diff --git a/packages/web-runtime/src/components/ThemeSwitcher.vue b/packages/web-runtime/src/components/ThemeSwitcher.vue
index 15073bf2972..e041bf70432 100644
--- a/packages/web-runtime/src/components/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/ThemeSwitcher.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
     <oc-select
-      :model-value="currentTheme"
+      :model-value="currentThemeOrAuto"
       :clearable="false"
-      :options="availableThemes"
+      :options="availableThemesAndAuto"
       option-label="name"
       @update:model-value="updateTheme"
     />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, unref } from 'vue'
+import { computed, defineComponent, unref } from 'vue'
 import { useMessages, useThemeStore, WebThemeType } from '@ownclouders/web-pkg'
 import { storeToRefs } from 'pinia'
 import { useGettext } from 'vue3-gettext'
@@ -20,24 +20,31 @@ export default defineComponent({
     const themeStore = useThemeStore()
     const { showMessage } = useMessages()
     const { $gettext } = useGettext()
+    const autoTheme = { name: $gettext('Auto (same as system)') }
 
-    const { setAndApplyTheme } = themeStore
+    const { setAndApplyTheme, setAutoSystemTheme, isCurrentThemeAutoSystem } = themeStore
 
     const updateTheme = (newTheme: WebThemeType) => {
+      if (newTheme == autoTheme) {
+        setAutoSystemTheme()
+        return
+      }
       setAndApplyTheme(newTheme)
       showMessage({ title: $gettext('Preference saved.') })
     }
 
     const { availableThemes, currentTheme } = storeToRefs(themeStore)
-
-    const isThemeCurrentlyActive = (theme: WebThemeType) => {
-      return unref(currentTheme) === theme
-    }
+    const currentThemeOrAuto = computed(() => {
+      if (unref(isCurrentThemeAutoSystem)) {
+        return autoTheme
+      }
+      return unref(currentTheme)
+    })
+    const availableThemesAndAuto = [autoTheme, ...unref(availableThemes)]
 
     return {
-      availableThemes,
-      currentTheme,
-      isThemeCurrentlyActive,
+      availableThemesAndAuto,
+      currentThemeOrAuto,
       updateTheme
     }
   }

From fefc0ebb1fb4ac6e32170e136ed527be859efc64 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 Jan 2024 14:23:11 +0100
Subject: [PATCH 04/10] Fix auto theme

---
 .../web-pkg/src/composables/piniaStores/theme.ts | 16 +++++++---------
 .../web-runtime/src/components/ThemeSwitcher.vue |  9 +++++++--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index 63609ea0807..4c3c4e882eb 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -82,7 +82,6 @@ export type WebThemeConfigType = z.infer<typeof WebThemeConfig>
 const themeStorageKey = 'oc_currentThemeName'
 
 export const useThemeStore = defineStore('theme', () => {
-  const currentThemeName = useLocalStorage(themeStorageKey, null) // null as default to make fallback possible
   const currentLocalStorageThemeName = useLocalStorage(themeStorageKey, null)
 
   const isDark = usePreferredDark()
@@ -94,13 +93,10 @@ export const useThemeStore = defineStore('theme', () => {
   const initializeThemes = (themeConfig: WebThemeConfigType) => {
     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
-    }
-
     setAndApplyTheme(
-      unref(availableThemes).find((t) => t.name === unref(currentThemeName)) ||
-        availableThemes.value[0]
+      unref(availableThemes).find((t) => t.name === unref(currentLocalStorageThemeName)) ||
+        availableThemes.value[0],
+      false
     )
   }
 
@@ -112,9 +108,11 @@ export const useThemeStore = defineStore('theme', () => {
     return currentLocalStorageThemeName.value == null
   })
 
-  const setAndApplyTheme = (theme: WebThemeType) => {
+  const setAndApplyTheme = (theme: WebThemeType, updateStorage = true) => {
     currentTheme.value = theme
-    currentLocalStorageThemeName.value = unref(currentTheme).name
+    if (updateStorage) {
+      currentLocalStorageThemeName.value = unref(currentTheme).name
+    }
 
     const customizableDesignTokens = [
       { name: 'breakpoints', prefix: 'breakpoint' },
diff --git a/packages/web-runtime/src/components/ThemeSwitcher.vue b/packages/web-runtime/src/components/ThemeSwitcher.vue
index e041bf70432..0ce2cee1521 100644
--- a/packages/web-runtime/src/components/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/ThemeSwitcher.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+import { computed, defineComponent, ref, unref } from 'vue'
 import { useMessages, useThemeStore, WebThemeType } from '@ownclouders/web-pkg'
 import { storeToRefs } from 'pinia'
 import { useGettext } from 'vue3-gettext'
@@ -21,10 +21,13 @@ export default defineComponent({
     const { showMessage } = useMessages()
     const { $gettext } = useGettext()
     const autoTheme = { name: $gettext('Auto (same as system)') }
+    const { availableThemes, currentTheme } = storeToRefs(themeStore)
+    const currentThemeSelection = ref(null)
 
     const { setAndApplyTheme, setAutoSystemTheme, isCurrentThemeAutoSystem } = themeStore
 
     const updateTheme = (newTheme: WebThemeType) => {
+      currentThemeSelection.value = newTheme
       if (newTheme == autoTheme) {
         setAutoSystemTheme()
         return
@@ -33,8 +36,10 @@ export default defineComponent({
       showMessage({ title: $gettext('Preference saved.') })
     }
 
-    const { availableThemes, currentTheme } = storeToRefs(themeStore)
     const currentThemeOrAuto = computed(() => {
+      if (unref(currentThemeSelection)) {
+        return unref(currentThemeSelection)
+      }
       if (unref(isCurrentThemeAutoSystem)) {
         return autoTheme
       }

From 4014e7488ca2ad8744cae554e40eb172ec04c5b5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 Jan 2024 14:28:23 +0100
Subject: [PATCH 05/10] Fix auto theme mode

---
 packages/web-pkg/src/composables/piniaStores/theme.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index 4c3c4e882eb..d725079984e 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -95,13 +95,14 @@ export const useThemeStore = defineStore('theme', () => {
 
     setAndApplyTheme(
       unref(availableThemes).find((t) => t.name === unref(currentLocalStorageThemeName)) ||
-        availableThemes.value[0],
+        (isDark ? availableThemes.value[1] : availableThemes.value[0]),
       false
     )
   }
 
   const setAutoSystemTheme = () => {
     currentLocalStorageThemeName.value = null
+    setAndApplyTheme(isDark ? availableThemes.value[1] : availableThemes.value[0], false)
   }
 
   const isCurrentThemeAutoSystem = computed(() => {

From 1d4791e405b4f22f0a1b676ee1e32e185b03313a Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 Jan 2024 14:32:15 +0100
Subject: [PATCH 06/10] Update snapshots

---
 .../Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap
index aa12a9e0b8d..262f9ef90c6 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`ThemeSwitcher component restores dark theme if dark theme is saved in localstorage 1`] = `
 <div>
-  <oc-select-stub clearable="false" model-value="[object Object]" option-label="name" options="[object Object],[object Object]"></oc-select-stub>
+  <oc-select-stub clearable="false" model-value="[object Object]" option-label="name" options="[object Object],[object Object],[object Object]"></oc-select-stub>
 </div>
 `;
 
 exports[`ThemeSwitcher component restores light theme if light theme is saved in localstorage 1`] = `
 <div>
-  <oc-select-stub clearable="false" model-value="[object Object]" option-label="name" options="[object Object],[object Object]"></oc-select-stub>
+  <oc-select-stub clearable="false" model-value="[object Object]" option-label="name" options="[object Object],[object Object],[object Object]"></oc-select-stub>
 </div>
 `;

From ffc01bb70246e774f2db922fb2be21e2fb9eefe7 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 Jan 2024 14:39:13 +0100
Subject: [PATCH 07/10] Fix missing unref

---
 packages/web-pkg/src/composables/piniaStores/theme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index d725079984e..a6a99fae98d 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -95,14 +95,14 @@ export const useThemeStore = defineStore('theme', () => {
 
     setAndApplyTheme(
       unref(availableThemes).find((t) => t.name === unref(currentLocalStorageThemeName)) ||
-        (isDark ? availableThemes.value[1] : availableThemes.value[0]),
+        (unref(isDark) ? availableThemes.value[1] : availableThemes.value[0]),
       false
     )
   }
 
   const setAutoSystemTheme = () => {
     currentLocalStorageThemeName.value = null
-    setAndApplyTheme(isDark ? availableThemes.value[1] : availableThemes.value[0], false)
+    setAndApplyTheme(unref(isDark) ? availableThemes.value[1] : availableThemes.value[0], false)
   }
 
   const isCurrentThemeAutoSystem = computed(() => {

From 93e99c2a6212190fd4aad7f9a324d3b32a6c874d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 18 Jan 2024 10:21:48 +0100
Subject: [PATCH 08/10] Address PR issues

---
 packages/web-pkg/src/composables/piniaStores/theme.ts | 6 ++++--
 packages/web-runtime/src/components/ThemeSwitcher.vue | 8 ++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index a6a99fae98d..df1264f9620 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -93,9 +93,11 @@ export const useThemeStore = defineStore('theme', () => {
   const initializeThemes = (themeConfig: WebThemeConfigType) => {
     availableThemes.value = themeConfig.themes.map((theme) => merge(themeConfig.defaults, theme))
 
+    const firstLightTheme = unref(availableThemes).find((theme) => !theme.isDark)
+    const firstDarkTheme = unref(availableThemes).find((theme) => theme.isDark)
     setAndApplyTheme(
       unref(availableThemes).find((t) => t.name === unref(currentLocalStorageThemeName)) ||
-        (unref(isDark) ? availableThemes.value[1] : availableThemes.value[0]),
+        (unref(isDark) ? firstDarkTheme : firstLightTheme),
       false
     )
   }
@@ -106,7 +108,7 @@ export const useThemeStore = defineStore('theme', () => {
   }
 
   const isCurrentThemeAutoSystem = computed(() => {
-    return currentLocalStorageThemeName.value == null
+    return currentLocalStorageThemeName.value === null
   })
 
   const setAndApplyTheme = (theme: WebThemeType, updateStorage = true) => {
diff --git a/packages/web-runtime/src/components/ThemeSwitcher.vue b/packages/web-runtime/src/components/ThemeSwitcher.vue
index 0ce2cee1521..4bdfe83b74a 100644
--- a/packages/web-runtime/src/components/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/ThemeSwitcher.vue
@@ -20,7 +20,7 @@ export default defineComponent({
     const themeStore = useThemeStore()
     const { showMessage } = useMessages()
     const { $gettext } = useGettext()
-    const autoTheme = { name: $gettext('Auto (same as system)') }
+    const autoTheme = computed(() => ({ name: $gettext('Auto (same as system)') }))
     const { availableThemes, currentTheme } = storeToRefs(themeStore)
     const currentThemeSelection = ref(null)
 
@@ -28,7 +28,7 @@ export default defineComponent({
 
     const updateTheme = (newTheme: WebThemeType) => {
       currentThemeSelection.value = newTheme
-      if (newTheme == autoTheme) {
+      if (newTheme == unref(autoTheme)) {
         setAutoSystemTheme()
         return
       }
@@ -41,11 +41,11 @@ export default defineComponent({
         return unref(currentThemeSelection)
       }
       if (unref(isCurrentThemeAutoSystem)) {
-        return autoTheme
+        return unref(autoTheme)
       }
       return unref(currentTheme)
     })
-    const availableThemesAndAuto = [autoTheme, ...unref(availableThemes)]
+    const availableThemesAndAuto = computed(() => [unref(autoTheme), ...unref(availableThemes)])
 
     return {
       availableThemesAndAuto,

From 63f99dedce429286c05d8ab14519062c37074517 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 18 Jan 2024 10:37:24 +0100
Subject: [PATCH 09/10] Address PR issues

---
 packages/web-pkg/src/composables/piniaStores/theme.ts | 11 ++++++++---
 packages/web-runtime/src/components/ThemeSwitcher.vue |  5 ++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index df1264f9620..64236beef09 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -92,9 +92,14 @@ export const useThemeStore = defineStore('theme', () => {
 
   const initializeThemes = (themeConfig: WebThemeConfigType) => {
     availableThemes.value = themeConfig.themes.map((theme) => merge(themeConfig.defaults, theme))
+    setThemeFromStorageOrSystem()
+  }
 
-    const firstLightTheme = unref(availableThemes).find((theme) => !theme.isDark)
-    const firstDarkTheme = unref(availableThemes).find((theme) => theme.isDark)
+  const setThemeFromStorageOrSystem = () => {
+    const firstLightTheme =
+      unref(availableThemes).find((theme) => !theme.isDark) || unref(availableThemes)[0]
+    const firstDarkTheme =
+      unref(availableThemes).find((theme) => theme.isDark) || unref(availableThemes)[0]
     setAndApplyTheme(
       unref(availableThemes).find((t) => t.name === unref(currentLocalStorageThemeName)) ||
         (unref(isDark) ? firstDarkTheme : firstLightTheme),
@@ -104,7 +109,7 @@ export const useThemeStore = defineStore('theme', () => {
 
   const setAutoSystemTheme = () => {
     currentLocalStorageThemeName.value = null
-    setAndApplyTheme(unref(isDark) ? availableThemes.value[1] : availableThemes.value[0], false)
+    setThemeFromStorageOrSystem()
   }
 
   const isCurrentThemeAutoSystem = computed(() => {
diff --git a/packages/web-runtime/src/components/ThemeSwitcher.vue b/packages/web-runtime/src/components/ThemeSwitcher.vue
index 4bdfe83b74a..d717d34c899 100644
--- a/packages/web-runtime/src/components/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/ThemeSwitcher.vue
@@ -28,12 +28,11 @@ export default defineComponent({
 
     const updateTheme = (newTheme: WebThemeType) => {
       currentThemeSelection.value = newTheme
+      showMessage({ title: $gettext('Preference saved.') })
       if (newTheme == unref(autoTheme)) {
-        setAutoSystemTheme()
-        return
+        return setAutoSystemTheme()
       }
       setAndApplyTheme(newTheme)
-      showMessage({ title: $gettext('Preference saved.') })
     }
 
     const currentThemeOrAuto = computed(() => {

From eb2b3a058cbbca5e6a24df51b191b457ceadd10f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 18 Jan 2024 10:46:32 +0100
Subject: [PATCH 10/10] Address PR issue

---
 packages/web-pkg/src/composables/piniaStores/theme.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index 64236beef09..26704eaaf55 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -96,13 +96,12 @@ export const useThemeStore = defineStore('theme', () => {
   }
 
   const setThemeFromStorageOrSystem = () => {
-    const firstLightTheme =
-      unref(availableThemes).find((theme) => !theme.isDark) || unref(availableThemes)[0]
-    const firstDarkTheme =
-      unref(availableThemes).find((theme) => theme.isDark) || unref(availableThemes)[0]
+    const firstLightTheme = unref(availableThemes).find((theme) => !theme.isDark)
+    const firstDarkTheme = unref(availableThemes).find((theme) => theme.isDark)
     setAndApplyTheme(
       unref(availableThemes).find((t) => t.name === unref(currentLocalStorageThemeName)) ||
-        (unref(isDark) ? firstDarkTheme : firstLightTheme),
+        (unref(isDark) ? firstDarkTheme : firstLightTheme) ||
+        unref(availableThemes)[0],
       false
     )
   }