diff --git a/changelog/unreleased/change-theme-handling b/changelog/unreleased/change-theme-handling
index f16474be65e..816805a69c8 100644
--- a/changelog/unreleased/change-theme-handling
+++ b/changelog/unreleased/change-theme-handling
@@ -11,6 +11,7 @@ https://github.com/owncloud/web/issues/2404
 https://github.com/owncloud/web/issues/8424
 https://github.com/owncloud/web/issues/9403
 https://github.com/owncloud/web/issues/9885
+https://github.com/owncloud/web/issues/9939
 
 https://github.com/owncloud/web/pull/8855
 https://github.com/owncloud/web/pull/9396
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 59afefa13cb..dd3ec35b7a2 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -79,8 +79,6 @@ Depending on the backend you are using, there are sample config files provided i
 - `options.tokenStorageLocal` Specifies whether the access token will be stored in the local storage when set to `true` or in the session storage when set to `false`. If stored in the local storage, login state will be persisted across multiple browser tabs, means no additional logins are required. Defaults to `true`.
 - `options.loginUrl` Specifies the target URL to the login page. This is helpful when an external IdP is used. This option is disabled by default. Example URL like: 'https://www.myidp.com/login'.
 - `options.logoutUrl` Adds a link to the user's profile page to point him to an external page, where he can manage his session and devices. This is helpful when an external IdP is used. This option is disabled by default.
-- `options.imprintUrl` Specifies the target URL for the imprint link valid for the ocis instance in the account menu.
-- `options.privacyUrl` Specifies the target URL for the privacy link valid for the ocis instance in the account menu.
 - `options.ocm.openRemotely` Specifies whether opening files in remote shares in their original ocm instance should be enabled. Defaults to `false`.
 - `options.userListRequiresFilter` Defines whether one or more filters must be set in order to list users in the Web admin settings. Set this option to 'true' if running in an environment with a lot of users and listing all users could slow down performance. Defaults to `false`.
 
diff --git a/packages/web-app-files/package.json b/packages/web-app-files/package.json
index 16b8cd0f24b..6b45593e2fd 100644
--- a/packages/web-app-files/package.json
+++ b/packages/web-app-files/package.json
@@ -28,6 +28,7 @@
     "luxon": "3.0.1",
     "marked": "^4.0.12",
     "p-queue": "^6.6.2",
+    "pinia": "2.1.7",
     "qs": "6.11.2",
     "sanitize-html": "^2.7.0",
     "uuid": "9.0.1",
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 2f99ba3f02c..07a0afaa00b 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -28,13 +28,14 @@
       </div>
 
       <div class="oc-text-center oc-mt-xxl">
-        <p v-text="currentTheme.general.slogan" />
+        <p v-text="themeSlogan" />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import { storeToRefs } from 'pinia'
 import { mapGetters } from 'vuex'
 import { createLocationPublic, createLocationSpaces, useThemeStore } from '@ownclouders/web-pkg'
 import ResourceUpload from '../components/AppBar/Upload/ResourceUpload.vue'
@@ -78,7 +79,7 @@ export default defineComponent({
   setup() {
     const uppyService = useService<UppyService>('$uppyService')
     const store = useStore()
-    const { currentTheme } = useThemeStore()
+    const themeStore = useThemeStore()
     const router = useRouter()
     const route = useRoute()
     const language = useGettext()
@@ -90,6 +91,9 @@ export default defineComponent({
     const { getInternalSpace } = useGetMatchingSpace()
     useUpload({ uppyService })
 
+    const { currentTheme } = storeToRefs(themeStore)
+    const themeSlogan = computed(() => currentTheme.value.common.slogan)
+
     const fileIdQueryItem = useRouteQuery('fileId')
     const fileId = computed(() => {
       return queryItemAsString(unref(fileIdQueryItem))
@@ -205,11 +209,11 @@ export default defineComponent({
     })
 
     return {
-      currentTheme,
       dragareaEnabled,
       loading,
       errorMessage,
-      share
+      share,
+      themeSlogan
     }
   },
   computed: {
diff --git a/packages/web-pkg/package.json b/packages/web-pkg/package.json
index a32f8aa9d0f..d1e82f67350 100644
--- a/packages/web-pkg/package.json
+++ b/packages/web-pkg/package.json
@@ -29,6 +29,7 @@
     "@uppy/xhr-upload": "^3.0.1",
     "@vueuse/core": "^10.0.0",
     "axios": "1.6.2",
+    "deepmerge": "^4.2.2",
     "design-system": "workspace:@ownclouders/design-system@*",
     "filesize": "^9.0.11",
     "fuse.js": "6.6.2",
diff --git a/packages/web-pkg/src/components/AppBanner.vue b/packages/web-pkg/src/components/AppBanner.vue
index 1bc74883272..409d8aac5d0 100644
--- a/packages/web-pkg/src/components/AppBanner.vue
+++ b/packages/web-pkg/src/components/AppBanner.vue
@@ -43,7 +43,6 @@ import { computed, defineComponent, ref, unref } from 'vue'
 import { useRouter, useThemeStore } from '../composables'
 import { buildUrl } from '../helpers/router'
 import { useSessionStorage } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   components: {},
@@ -58,13 +57,17 @@ export default defineComponent({
     const isVisible = ref<boolean>(unref(appBannerWasClosed) === null)
 
     const router = useRouter()
-    const themeStore = useThemeStore()
-    const { currentTheme } = storeToRefs(themeStore)
+    const { currentTheme } = useThemeStore()
+
+    const appBannerSettings = currentTheme.appBanner
+    const isAppBannerAvailable = computed(
+      () => appBannerSettings && Object.keys(appBannerSettings).length != 0
+    )
 
     const appUrl = computed(() => {
       return buildUrl(router, `/f/${props.fileId}`)
         .toString()
-        .replace('https', currentTheme.value.appBanner.appScheme)
+        .replace('https', currentTheme.appBanner.appScheme)
     })
 
     const close = () => {
@@ -76,6 +79,7 @@ export default defineComponent({
       appUrl,
       close,
       currentTheme,
+      isAppBannerAvailable,
       isVisible
     }
   }
diff --git a/packages/web-pkg/src/composables/appDefaults/useDocumentTitle.ts b/packages/web-pkg/src/composables/appDefaults/useDocumentTitle.ts
index 8962d4f446b..f1814ed1ae0 100755
--- a/packages/web-pkg/src/composables/appDefaults/useDocumentTitle.ts
+++ b/packages/web-pkg/src/composables/appDefaults/useDocumentTitle.ts
@@ -1,17 +1,16 @@
 import { watch, Ref, unref } from 'vue'
-import { useStore } from '../store'
-import { Store } from 'vuex'
 import { useEventBus } from '../eventBus'
+import { useThemeStore } from '../piniaStores'
 import { EventBus } from '../../services'
 
 interface DocumentTitleOptions {
   titleSegments: Ref<string[]>
-  store?: Store<any>
   eventBus?: EventBus
 }
 
-export function useDocumentTitle({ titleSegments, store, eventBus }: DocumentTitleOptions): void {
-  store = store || useStore()
+export function useDocumentTitle({ titleSegments, eventBus }: DocumentTitleOptions): void {
+  const { currentTheme } = useThemeStore()
+
   eventBus = eventBus || useEventBus()
 
   watch(
@@ -20,10 +19,9 @@ export function useDocumentTitle({ titleSegments, store, eventBus }: DocumentTit
       const titleSegments = unref(newTitleSegments)
 
       const glue = ' - '
-      const generalName = store.getters['configuration'].currentTheme.general.name
       const payload = {
         shortDocumentTitle: titleSegments.join(glue),
-        fullDocumentTitle: [...titleSegments, generalName].join(glue)
+        fullDocumentTitle: [...titleSegments, currentTheme.common.name].join(glue)
       }
 
       eventBus.publish('runtime.documentTitle.changed', payload)
diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index bc178ee606c..6dbc6dd0921 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -1,56 +1,80 @@
+import merge from 'deepmerge'
 import { defineStore } from 'pinia'
 import { ref, computed, unref } from 'vue'
 import { useLocalStorage, usePreferredDark } from '@vueuse/core'
 
-interface CommonTheme {
+interface AppBanner {
+  title: string
+  publisher: string
+  additionalInformation: string
+  ctaText: string
+  icon: string
+  appScheme: string
+}
+
+interface CommonSection {
   name: string
   slogan: string
   logo: string
-  accessDeniedHelpUrl: string
+  urls: {
+    accessDeniedHelp: string
+    imprint: string
+    privacy: string
+  }
+}
+
+interface DesignTokens {
+  breakpoints?: Record<string, string>
+  colorPalette?: Record<string, string>
+  fontSizes?: Record<string, string>
+  sizes?: Record<string, string>
+  spacing?: Record<string, string>
+}
+
+interface LoginPage {
+  autoRedirect: boolean
+  backgroundImg: string
+}
+
+interface Logo {
+  topbar: string
+  favicon: string
+  login: string
+  notFound: string
+}
+
+interface ThemeDefaults {
+  appBanner?: AppBanner
+  common: CommonSection
+  designTokens: DesignTokens
+  loginPage: LoginPage
+  logo: Logo
 }
 
 interface WebTheme {
-  general: {
-    name: string
-    slogan: string
-    privacyUrl: string
-    imprintUrl: string
-  }
-  appBanner: {
-    title: string
-    publisher: string
-    additionalInformation: string
-    ctaText: string
-    icon: string
-    appScheme: string
-  }
+  appBanner?: AppBanner
+  common?: CommonSection
+  designTokens: DesignTokens
+
   isDark: boolean
-  logo: {
-    topbar: string
-    favicon: string
-    login: string
-    notFound: string
-  }
-  loginPage: {
-    autoRedirect: boolean
-    backgroundImg: string
-  }
-  // TODO: Refine designTokens according to existing theme.json contents
-  designTokens: {
-    colorPalette: Record<string, string>
-  }
+  name: string
+  loginPage?: LoginPage
+  logo?: Logo
 }
 
-const themeNameLight = 'default'
-const themeNameDark = 'default-dark'
+interface WebThemeConfig {
+  defaults: ThemeDefaults
+  themes: WebTheme[]
+}
+
+const themeStorageKey = 'oc_currentThemeName'
 
 export const useThemeStore = defineStore('theme', () => {
-  const commonTheme = ref<CommonTheme | undefined>()
   const currentTheme = ref<WebTheme | undefined>()
 
   const availableThemes = ref<WebTheme[]>([])
 
-  const hasOnlyOneTheme = computed(() => availableThemes.value.length > 1)
+  const hasOnlyOneTheme = computed(() => availableThemes.value.length === 1)
 
   const hasOnlyTwoThemesForLightDarkMode = computed(
     () =>
@@ -59,26 +83,29 @@ export const useThemeStore = defineStore('theme', () => {
       availableThemes.value.some((t) => t.isDark !== true)
   )
 
-  const initializeThemes = (themes: WebTheme[], newCommonTheme: CommonTheme) => {
-    availableThemes.value = themes
-    commonTheme.value = newCommonTheme
+  const initializeThemes = (themeConfig: WebThemeConfig) => {
+    availableThemes.value = themeConfig.themes.map((theme) => merge(themeConfig.defaults, theme))
+
+    const currentThemeName = useLocalStorage(themeStorageKey, null) // null as default to make fallback possible
 
-    const currentThemeName = useLocalStorage('oc_currentThemeName', null) // note: use null as default so that we can fall back to system preferences
-    // Set default theme name as fallback
     if (unref(currentThemeName) === null) {
       const isDark = usePreferredDark()
-      currentThemeName.value = isDark.value ? themeNameDark : themeNameLight
+      currentThemeName.value = availableThemes.value.find((t) => t.isDark === isDark.value)
     }
 
-    // TODO: Fix this by passing full theme?
-    // TODO: Discuss handling (former) default scenario
-    setAndApplyTheme(availableThemes.value.find((t) => t.general.name === currentThemeName.value))
+    setAndApplyTheme(
+      availableThemes.value.find((t) => t.name === currentThemeName.value) ||
+        availableThemes.value[0]
+    )
   }
 
   const setAndApplyTheme = (theme: WebTheme) => {
     currentTheme.value = theme
+    const currentLocalStorageThemeName = useLocalStorage(themeStorageKey, theme.name)
+    currentLocalStorageThemeName.value = currentTheme.value.name
 
-    for (const param in currentTheme.value.designTokens.colorPalette) {
+    // TODO: Shouldn't we loop over all designTokens and set them?
+    for (const param in currentTheme.value.designTokens?.colorPalette) {
       ;(document.querySelector(':root') as HTMLElement).style.setProperty(
         `--oc-color-${param}`,
         theme.designTokens.colorPalette[param]
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index aaa483a4f55..56ef6559666 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -69,6 +69,7 @@ import { eventBus, useRouter } from '@ownclouders/web-pkg'
 import { useHead } from './composables/head'
 import { useStore, useThemeStore } from '@ownclouders/web-pkg'
 import { RouteLocation } from 'vue-router'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   components: {
@@ -76,7 +77,9 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
-    const { currentTheme } = useThemeStore()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
+
     const router = useRouter()
     useHead({ store })
 
@@ -216,7 +219,7 @@ export default defineComponent({
       const titleSegments = [routeTitle]
       return {
         shortDocumentTitle: titleSegments.join(glue),
-        fullDocumentTitle: [...titleSegments, this.currentTheme.general.name].join(glue)
+        fullDocumentTitle: [...titleSegments, this.currentTheme.common.name].join(glue)
       }
     }
   }
diff --git a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
index d326e8eb663..02fa946d8ab 100644
--- a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
@@ -1,50 +1,61 @@
 <template>
-  <oc-button
-    v-if="hasOnlyTwoThemesForLightDarkMode"
-    v-oc-tooltip="buttonLabel"
-    class="themeswitcher-btn"
-    :aria-label="buttonLabel"
-    appearance="raw-inverse"
-    variation="brand"
-    @click="toggleTheme"
-  >
-    <span class="oc-visible@s" :aria-label="switchLabel" />
-    <oc-icon :name="switchIcon" fill-type="line" variation="inherit" />
-  </oc-button>
-  <template v-else-if="availableThemes.length > 2">
+  <div v-if="!hasOnlyOneTheme">
     <oc-button
-      id="files-view-options-btn"
-      key="files-view-options-btn"
+      v-if="hasOnlyTwoThemesForLightDarkMode"
       v-oc-tooltip="buttonLabel"
-      data-testid="files-view-options-btn"
+      class="themeswitcher-btn"
       :aria-label="buttonLabel"
-      appearance="raw"
-      variation="inverse"
-      class="oc-mr-s"
+      appearance="raw-inverse"
+      variation="brand"
+      @click="toggleTheme"
     >
-      <oc-icon name="paint" />
+      <span class="oc-visible@s" :aria-label="switchLabel" />
+      <oc-icon :name="switchIcon" fill-type="line" variation="inherit" />
     </oc-button>
-    <oc-drop
-      drop-id="files-view-options-drop"
-      toggle="#files-view-options-btn"
-      mode="click"
-      class="oc-width-auto"
-      padding-size="medium"
-    >
-      <oc-list>
-        <li
-          v-for="theme in availableThemes"
-          :key="theme.general.name"
-          class="files-view-options-list-item"
-        >
-          <oc-button @click="setAndApplyTheme(theme)">{{ theme.general.name }}</oc-button>
-        </li>
-      </oc-list>
-    </oc-drop>
-  </template>
+    <template v-else>
+      <oc-button
+        id="theme-picker-options-btn"
+        key="theme-picker-options-btn"
+        v-oc-tooltip="buttonLabel"
+        data-testid="theme-picker-options-btn"
+        :aria-label="buttonLabel"
+        appearance="raw-inverse"
+        variation="brand"
+      >
+        <oc-icon name="paint" />
+      </oc-button>
+      <oc-drop
+        drop-id="theme-picker-options-drop"
+        toggle="#theme-picker-options-btn"
+        mode="click"
+        padding-size="small"
+        close-on-click
+      >
+        <oc-list class="oc-tiles-sort-list">
+          <li v-for="(theme, index) in availableThemes" :key="index" class="oc-my-xs">
+            <oc-button
+              :aria-label="buttonLabel"
+              justify-content="space-between"
+              class="theme-picker-options-list-item oc-p-s oc-width-1-1"
+              :class="{
+                'oc-background-primary-gradient': isThemeCurrentlyActive(theme),
+                selected: isThemeCurrentlyActive(theme)
+              }"
+              :appearance="isThemeCurrentlyActive(theme) ? 'raw-inverse' : 'raw'"
+              :variation="isThemeCurrentlyActive(theme) ? 'primary' : 'passive'"
+              @click="setAndApplyTheme(theme)"
+            >
+              <span>{{ theme.name }}</span>
+              <oc-icon v-if="isThemeCurrentlyActive(theme)" name="check" variation="inherit" />
+            </oc-button>
+          </li>
+        </oc-list>
+      </oc-drop>
+    </template>
+  </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useThemeStore } from '@ownclouders/web-pkg'
 import { storeToRefs } from 'pinia'
@@ -56,18 +67,24 @@ export default defineComponent({
 
     const { setAndApplyTheme, toggleTheme } = themeStore
 
-    const { availableThemes, currentTheme, hasOnlyTwoThemesForLightDarkMode } =
+    const { availableThemes, currentTheme, hasOnlyOneTheme, hasOnlyTwoThemesForLightDarkMode } =
       storeToRefs(themeStore)
 
     const buttonLabel = computed(() => $gettext('Click to switch theme'))
     const switchLabel = computed(() => $gettext('Currently used theme'))
     const switchIcon = computed(() => (currentTheme.value.isDark === false ? 'sun' : 'moon-clear'))
 
+    const isThemeCurrentlyActive = (theme) => {
+      return unref(currentTheme) === theme
+    }
+
     return {
       availableThemes,
       buttonLabel,
       currentTheme,
+      hasOnlyOneTheme,
       hasOnlyTwoThemesForLightDarkMode,
+      isThemeCurrentlyActive,
       setAndApplyTheme,
       switchIcon,
       switchLabel,
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index 9d7ed481c22..0bb8cf41adc 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -26,7 +26,7 @@
     </div>
     <template v-if="!isEmbedModeEnabled">
       <portal to="app.runtime.header.right" :order="50">
-        <theme-switcher v-if="!hasOnlyOneTheme" />
+        <theme-switcher />
         <feedback-link v-if="isFeedbackLinkEnabled" v-bind="feedbackLinkOptions" />
       </portal>
       <portal to="app.runtime.header.right" :order="100">
@@ -39,6 +39,9 @@
 </template>
 
 <script lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, unref, PropType, ref } from 'vue'
+import { useGettext } from 'vue3-gettext'
 import { mapGetters } from 'vuex'
 
 import ApplicationsMenu from './ApplicationsMenu.vue'
@@ -55,8 +58,6 @@ import {
   useThemeStore,
   useUserContext
 } from '@ownclouders/web-pkg'
-import { computed, unref, PropType, ref } from 'vue'
-import { useGettext } from 'vue3-gettext'
 
 export default {
   components: {
@@ -75,7 +76,9 @@ export default {
   },
   setup(props) {
     const store = useStore()
-    const { currentTheme, hasOnlyOneTheme } = useThemeStore()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
+
     const notificationsSupport = useCapabilityNotifications()
     const isUserContext = useUserContext({ store })
     const language = useGettext()
@@ -184,7 +187,6 @@ export default {
       contentOnLeftPortal,
       currentTheme,
       updateLeftPortal,
-      hasOnlyOneTheme,
       isNotificationBellEnabled,
       userMenuItems,
       appMenuItems,
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index 26769fc894a..9c7bbb8754f 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -123,8 +123,9 @@ import { mapGetters, mapState } from 'vuex'
 import filesize from 'filesize'
 import isNil from 'lodash-es/isNil'
 import { authService } from '../../services/auth'
-import { useCapabilitySpacesEnabled, useRoute, useStore } from '@ownclouders/web-pkg'
+import { useCapabilitySpacesEnabled, useRoute, useThemeStore } from '@ownclouders/web-pkg'
 import { OcDrop } from 'design-system/src/components'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   props: {
@@ -136,19 +137,19 @@ export default defineComponent({
   },
   setup() {
     const route = useRoute()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
+
     const loginLink = computed(() => {
       return {
         name: 'login',
         query: { redirectUrl: unref(route).fullPath }
       }
     })
-    const store = useStore()
-    const imprintUrl = computed(() => {
-      return store.getters.configuration.options.imprintUrl
-    })
-    const privacyUrl = computed(() => {
-      return store.getters.configuration.options.privacyUrl
-    })
+
+    const imprintUrl = computed(() => currentTheme.value.common.urls.imprint)
+    const privacyUrl = computed(() => currentTheme.value.common.urls.privacy)
+
     return {
       hasSpaces: useCapabilitySpacesEnabled(),
       loginLink,
diff --git a/packages/web-runtime/src/composables/head/useHead.ts b/packages/web-runtime/src/composables/head/useHead.ts
index de4f52c3a85..cf8f4fce687 100644
--- a/packages/web-runtime/src/composables/head/useHead.ts
+++ b/packages/web-runtime/src/composables/head/useHead.ts
@@ -1,12 +1,17 @@
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import { Store } from 'vuex'
 import { useHead as _useHead } from '@vueuse/head'
 import { getBackendVersion, getWebVersion } from 'web-runtime/src/container/versions'
+import { useThemeStore } from '@ownclouders/web-pkg'
+import { storeToRefs } from 'pinia'
 
 export const useHead = ({ store }: { store: Store<any> }) => {
   _useHead(
     computed(() => {
-      const favicon = store.getters['configuration']?.currentTheme?.logo?.favicon
+      const themeStore = useThemeStore()
+      const { currentTheme } = storeToRefs(themeStore)
+      const favicon = computed(() => currentTheme.value.logo.favicon)
+
       return {
         meta: [
           {
@@ -14,7 +19,7 @@ export const useHead = ({ store }: { store: Store<any> }) => {
             content: [getWebVersion(), getBackendVersion({ store })].filter(Boolean).join(', ')
           }
         ],
-        ...(favicon && { link: [{ rel: 'icon', href: favicon }] })
+        ...(unref(favicon) && { link: [{ rel: 'icon', href: favicon }] })
       }
     })
   )
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 7dfb64017a7..9ea0b74086e 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -321,9 +321,9 @@ export const announceTheme = async ({
   const { initializeThemes } = themeStore
   const { currentTheme } = storeToRefs(themeStore)
 
-  const { web, common } = await loadTheme(runtimeConfiguration?.theme)
+  const webTheme = await loadTheme(runtimeConfiguration?.theme)
 
-  await initializeThemes([web], common)
+  await initializeThemes(webTheme)
 
   app.use(designSystem, {
     tokens: currentTheme.value.designTokens
diff --git a/packages/web-runtime/src/helpers/theme.ts b/packages/web-runtime/src/helpers/theme.ts
index 1a386072e49..17acf39e9f4 100644
--- a/packages/web-runtime/src/helpers/theme.ts
+++ b/packages/web-runtime/src/helpers/theme.ts
@@ -3,7 +3,7 @@ import defaultTheme from '../../themes/owncloud/theme.json'
 import { v4 as uuidV4 } from 'uuid'
 
 export const loadTheme = async (location = '') => {
-  const defaults = { web: defaultTheme.web, common: defaultTheme.common }
+  const defaults = defaultTheme.web
 
   if (location.split('.').pop() !== 'json') {
     if (isEqual(process.env.NODE_ENV, 'development')) {
@@ -18,11 +18,10 @@ export const loadTheme = async (location = '') => {
       return defaults
     }
     const theme = await response.json()
-    return { web: theme.web, common: theme.common || {} }
+    // Check if web key (with default and themes) is in the loaded theme, else log error and use default theme?
+    return theme.web || {}
   } catch (e) {
-    console.error(
-      `Failed to load theme '${location}' is not a valid json file, using default theme.`
-    )
+    console.error(`Failed to load theme '${location}', using default theme.`)
     return defaults
   }
 }
diff --git a/packages/web-runtime/src/layouts/Plain.vue b/packages/web-runtime/src/layouts/Plain.vue
index 9629b19b63a..2f82aeeeba1 100644
--- a/packages/web-runtime/src/layouts/Plain.vue
+++ b/packages/web-runtime/src/layouts/Plain.vue
@@ -10,22 +10,20 @@
 
 <script lang="ts">
 import { computed, defineComponent, unref } from 'vue'
-import { useRouteMeta, useStore } from '@ownclouders/web-pkg'
+import { useRouteMeta, useThemeStore } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'PlainLayout',
   setup() {
-    const store = useStore()
     const { $gettext } = useGettext()
+    const { currentTheme } = useThemeStore()
     const title = useRouteMeta('title')
 
     const pageTitle = computed(() => {
       return $gettext(unref(title) || '')
     })
-    const backgroundImg = computed(() => {
-      return store.getters.configuration?.currentTheme?.loginPage?.backgroundImg
-    })
+    const backgroundImg = computed(() => currentTheme.loginPage.backgroundImg)
 
     return {
       pageTitle,
diff --git a/packages/web-runtime/src/pages/accessDenied.vue b/packages/web-runtime/src/pages/accessDenied.vue
index 58e175761a4..a1e0da863ea 100644
--- a/packages/web-runtime/src/pages/accessDenied.vue
+++ b/packages/web-runtime/src/pages/accessDenied.vue
@@ -34,34 +34,29 @@
 
 <script lang="ts">
 import { computed, defineComponent, unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
 import {
   queryItemAsString,
   useConfigurationManager,
   useRouteQuery,
-  useStore
+  useThemeStore
 } from '@ownclouders/web-pkg'
-import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'AccessDeniedPage',
   setup() {
-    const store = useStore()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
     const configurationManager = useConfigurationManager()
     const redirectUrlQuery = useRouteQuery('redirectUrl')
 
     const { $gettext } = useGettext()
 
-    const logoImg = computed(() => {
-      return store.getters.configuration?.currentTheme?.logo?.login
-    })
+    const accessDeniedHelpUrl = computed(() => currentTheme.value.common.urls.accessDeniedHelp)
+    const footerSlogan = computed(() => currentTheme.value.common.slogan)
+    const logoImg = computed(() => currentTheme.value.logo.login)
 
-    const accessDeniedHelpUrl = computed(() => {
-      return (
-        // TODO: Discuss if this can be reduced to config only?
-        store.getters.configuration?.commonTheme?.accessDeniedHelpUrl ||
-        store.getters.configuration?.options?.accessDeniedHelpUrl
-      )
-    })
     const cardTitle = computed(() => {
       return $gettext('Not logged in')
     })
@@ -70,9 +65,6 @@ export default defineComponent({
         'This could be because of a routine safety log out, or because your account is either inactive or not yet authorized for use. Please try logging in after a while or seek help from your Administrator.'
       )
     })
-    const footerSlogan = computed(() => {
-      return store.getters.configuration?.currentTheme?.general?.slogan
-    })
     const navigateToLoginText = computed(() => {
       return $gettext('Log in again')
     })
diff --git a/packages/web-runtime/src/pages/login.vue b/packages/web-runtime/src/pages/login.vue
index 1498669ba51..f4e10cb7d1b 100644
--- a/packages/web-runtime/src/pages/login.vue
+++ b/packages/web-runtime/src/pages/login.vue
@@ -32,9 +32,10 @@
 
 <script lang="ts">
 import { authService } from '../services/auth'
-import { queryItemAsString, useRouteQuery, useStore } from '@ownclouders/web-pkg'
+import { queryItemAsString, useRouteQuery, useThemeStore } from '@ownclouders/web-pkg'
 import { computed, defineComponent, unref } from 'vue'
 import { AppLoadingSpinner } from '@ownclouders/web-pkg'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'LoginPage',
@@ -42,28 +43,21 @@ export default defineComponent({
     AppLoadingSpinner
   },
   setup() {
-    const store = useStore()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
 
     const redirectUrl = useRouteQuery('redirectUrl')
     const performLogin = () => {
       authService.loginUser(queryItemAsString(unref(redirectUrl)))
     }
-    const autoRedirect = computed(() => {
-      return store.getters.configuration.currentTheme.loginPage.autoRedirect
-    })
+    const autoRedirect = computed(() => currentTheme.value.loginPage.autoRedirect)
     if (unref(autoRedirect)) {
       performLogin()
     }
 
-    const productName = computed(() => {
-      return store.getters.configuration.currentTheme.general.name
-    })
-    const logoImg = computed(() => {
-      return store.getters.configuration.currentTheme.logo.login
-    })
-    const footerSlogan = computed(() => {
-      return store.getters.configuration.currentTheme.general.slogan
-    })
+    const productName = computed(() => currentTheme.value.common.name)
+    const logoImg = computed(() => currentTheme.value.logo.login)
+    const footerSlogan = computed(() => currentTheme.value.common.slogan)
 
     return {
       autoRedirect,
diff --git a/packages/web-runtime/src/pages/logout.vue b/packages/web-runtime/src/pages/logout.vue
index adef5e043eb..2ed8ec877bf 100644
--- a/packages/web-runtime/src/pages/logout.vue
+++ b/packages/web-runtime/src/pages/logout.vue
@@ -14,33 +14,33 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useRouter, useStore } from '@ownclouders/web-pkg'
+import { useRouter, useThemeStore } from '@ownclouders/web-pkg'
 import { authService } from 'web-runtime/src/services/auth'
 import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'LogoutPage',
   setup() {
     const router = useRouter()
-    const store = useStore()
     const { $gettext } = useGettext()
+    const themeStore = useThemeStore()
+
+    const { currentTheme } = storeToRefs(themeStore)
 
     authService.logoutUser().then(() => {
       router.push({ name: 'login' })
     })
 
-    const logoImg = computed(() => {
-      return store.getters.configuration.currentTheme.logo.login
-    })
     const cardTitle = computed(() => {
       return $gettext('Logout in progress')
     })
     const cardHint = computed(() => {
       return $gettext("Please wait while you're being logged out.")
     })
-    const footerSlogan = computed(() => {
-      return store.getters.configuration.currentTheme.general.slogan
-    })
+
+    const footerSlogan = computed(() => currentTheme.value.common.slogan)
+    const logoImg = computed(() => currentTheme.value.logo.login)
 
     return {
       logoImg,
diff --git a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
index f134f8d322c..a9e4161b8af 100644
--- a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
+++ b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
@@ -22,20 +22,19 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore } from '@ownclouders/web-pkg'
+import { useStore, useThemeStore } from '@ownclouders/web-pkg'
 import { useHead } from '../composables/head'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'MissingConfigPage',
   setup() {
     const store = useStore()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
 
-    const logoImg = computed(() => {
-      return store.getters.configuration?.currentTheme?.logo?.login
-    })
-    const footerSlogan = computed(() => {
-      return store.getters.configuration?.currentTheme?.general?.slogan
-    })
+    const logoImg = computed(() => currentTheme.value.logo.login)
+    const footerSlogan = computed(() => currentTheme.value.common.slogan)
 
     useHead({ store })
 
diff --git a/packages/web-runtime/src/pages/oidcCallback.vue b/packages/web-runtime/src/pages/oidcCallback.vue
index 96807dc5e58..f69247fb7a4 100644
--- a/packages/web-runtime/src/pages/oidcCallback.vue
+++ b/packages/web-runtime/src/pages/oidcCallback.vue
@@ -17,24 +17,23 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, unref } from 'vue'
-import { useEmbedMode, useRoute, useStore } from '@ownclouders/web-pkg'
+import { useEmbedMode, useRoute, useThemeStore } from '@ownclouders/web-pkg'
 import { authService } from 'web-runtime/src/services/auth'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'OidcCallbackPage',
   setup() {
-    const store = useStore()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
+
     const { isDelegatingAuthentication, postMessage, verifyDelegatedAuthenticationOrigin } =
       useEmbedMode()
 
     const error = ref(false)
 
-    const logoImg = computed(() => {
-      return store.getters.configuration.currentTheme.logo.login
-    })
-    const footerSlogan = computed(() => {
-      return store.getters.configuration.currentTheme.general.slogan
-    })
+    const footerSlogan = computed(() => currentTheme.value.common.slogan)
+    const logoImg = computed(() => currentTheme.value.logo.login)
 
     const route = useRoute()
 
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index b279102772b..80824f252e5 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -71,6 +71,7 @@ import {
   useRouteQuery,
   useRouter,
   useStore,
+  useThemeStore,
   useUserContext
 } from '@ownclouders/web-pkg'
 import { useTask } from 'vue-concurrency'
@@ -87,6 +88,7 @@ import { useLoadTokenInfo } from 'web-runtime/src/composables/tokenInfo'
 import { urlJoin } from '@ownclouders/web-client/src/utils'
 import { RouteLocationNamedRaw } from 'vue-router'
 import { dirname } from 'path'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'ResolvePublicLink',
@@ -99,6 +101,9 @@ export default defineComponent({
     const { $gettext } = useGettext()
     const token = useRouteParam('token')
     const redirectUrl = useRouteQuery('redirectUrl')
+    const themeStore = useThemeStore()
+
+    const { currentTheme } = storeToRefs(themeStore)
     const password = ref('')
 
     const isOcmLink = computed(() => {
@@ -316,7 +321,7 @@ export default defineComponent({
       }
     })
 
-    const footerSlogan = computed(() => store.getters.configuration.currentTheme.general.slogan)
+    const footerSlogan = computed(() => currentTheme.value.common.slogan)
     const passwordFieldLabel = computed(() => {
       return $gettext('Enter password for public link')
     })
diff --git a/packages/web-runtime/src/store/config.ts b/packages/web-runtime/src/store/config.ts
index 4b655217f80..21716769c8d 100644
--- a/packages/web-runtime/src/store/config.ts
+++ b/packages/web-runtime/src/store/config.ts
@@ -42,9 +42,7 @@ const state = {
     openLinksWithDefaultApp: true,
     tokenStorageLocal: true,
     loginUrl: '',
-    privacyUrl: '',
-    imprintUrl: '',
-    accessDeniedHelpUrl: '',
+    logoutUrl: '', // Fixme: why was this missing before?
     disabledExtensions: [],
     userListRequiresFilter: false,
     embed: {
diff --git a/packages/web-runtime/themes/owncloud/theme.json b/packages/web-runtime/themes/owncloud/theme.json
index 1c7602301e6..e0133f5feb9 100644
--- a/packages/web-runtime/themes/owncloud/theme.json
+++ b/packages/web-runtime/themes/owncloud/theme.json
@@ -1,96 +1,19 @@
 {
-  "common": {
-    "name": "ownCloud",
-    "slogan": "ownCloud – A safe home for all your data",
-    "logo": "themes/owncloud/assets/logo.svg"
-  },
+  "android": {},
   "ios": {},
-  "web": [
-    {
-      "isDark": false,
-      "title": "Light Theme",
-      "name": "ownCloud Light Theme",
-      "appBanner": {
-        "title": "ownCloud",
-        "publisher": "ownCloud GmbH",
-        "additionalInformation": "",
-        "ctaText": "OPEN",
-        "icon": "themes/owncloud/assets/owncloud-app-icon.png",
-        "appScheme": "owncloud"
-      },
-      "logo": {
-        "topbar": "themes/owncloud/assets/logo.svg",
-        "favicon": "themes/owncloud/assets/favicon.jpg",
-        "login": "themes/owncloud/assets/logo.svg"
-      },
-      "loginPage": {
-        "autoRedirect": true,
-        "backgroundImg": "themes/owncloud/assets/loginBackground.jpg"
-      },
-      "designTokens": {
-        "colorPalette": {
-          "background-accentuate": "rgba(255, 255, 5, 0.1)",
-          "background-default": "#ffffff",
-          "background-highlight": "#edf3fa",
-          "background-muted": "#f8f8f8",
-          "background-secondary": "#ffffff",
-          "background-hover": "rgb(236, 236, 236)",
-          "color-components-apptopbar-background": "transparent",
-          "color-components-apptopbar-border": "#ceddee",
-          "border": "#ecebee",
-          "input-bg": "#ffffff",
-          "input-border": "#ceddee",
-          "input-text-default": "#041e42",
-          "input-text-muted": "#4c5f79",
-          "swatch-brand-default": "#041e42",
-          "swatch-brand-hover": "#223959",
-          "swatch-brand-contrast": "#ffffff",
-          "swatch-danger-contrast": "#ffffff",
-          "swatch-danger-default": "rgb(197, 48, 48)",
-          "swatch-danger-hover": "#b12b2b",
-          "swatch-danger-muted": "rgb(204, 117, 117)",
-          "swatch-inverse-default": "#ffffff",
-          "swatch-inverse-hover": "#ffffff",
-          "swatch-inverse-muted": "#bfbfbf",
-          "swatch-passive-default": "#4c5f79",
-          "swatch-passive-hover": "#43536b",
-          "swatch-passive-hover-outline": "#f7fafd",
-          "swatch-passive-muted": "#283e5d",
-          "swatch-passive-contrast": "#ffffff",
-          "swatch-primary-default": "#4a76ac",
-          "swatch-primary-hover": "#80a7d7",
-          "swatch-primary-muted": "#2c588e",
-          "swatch-primary-muted-hover": "rgb(36, 75, 119)",
-          "swatch-primary-gradient": "#4e85c8",
-          "swatch-primary-gradient-hover": "rgb(59, 118, 194)",
-          "swatch-primary-contrast": "#ffffff",
-          "swatch-success-default": "rgb(3, 84, 63)",
-          "swatch-success-hover": "#023b2c",
-          "swatch-success-muted": "rgb(83, 150, 10)",
-          "swatch-success-contrast": "#ffffff",
-          "swatch-warning-default": "rgb(183, 76, 27)",
-          "swatch-warning-hover": "#a04318",
-          "swatch-warning-muted": "rgba(183, 76, 27, .5)",
-          "swatch-warning-contrast": "#ffffff",
-          "text-default": "#041e42",
-          "text-inverse": "#ffffff",
-          "text-muted": "#4c5f79",
-          "icon-folder": "#4d7eaf",
-          "icon-archive": "#fbbe54",
-          "icon-image": "#ee6b3b",
-          "icon-spreadsheet": "#15c286",
-          "icon-document": "#3b44a6",
-          "icon-video": "#045459",
-          "icon-audio": "#700460",
-          "icon-presentation": "#ee6b3b",
-          "icon-pdf": "#ec0d47"
+  "desktop": {},
+  "web": {
+    "defaults": {
+      "common": {
+        "name": "ownCloud",
+        "slogan": "ownCloud – A safe home for all your data",
+        "logo": "themes/owncloud/assets/logo.svg",
+        "urls": {
+          "accessDeniedHelp": "",
+          "imprint": "",
+          "privacy": ""
         }
-      }
-    },
-    {
-      "isDark": true,
-      "title": "Dark Theme",
-      "name": "ownCloud Dark Theme",
+      },
       "appBanner": {
         "title": "ownCloud",
         "publisher": "ownCloud GmbH",
@@ -102,8 +25,7 @@
       "logo": {
         "topbar": "themes/owncloud/assets/logo.svg",
         "favicon": "themes/owncloud/assets/favicon.jpg",
-        "login": "themes/owncloud/assets/logo.svg",
-        "notFound": "themes/owncloud/assets/cloud.svg"
+        "login": "themes/owncloud/assets/logo.svg"
       },
       "loginPage": {
         "autoRedirect": true,
@@ -120,65 +42,6 @@
           "large-max": "",
           "xlarge": ""
         },
-        "colorPalette": {
-          "background-accentuate": "#696969",
-          "background-default": "#292929",
-          "background-highlight": "#383838",
-          "background-muted": "#383838",
-          "background-secondary": "#4f4f4f",
-          "background-hover": "#383838",
-          "color-components-apptopbar-background": "transparent",
-          "color-components-apptopbar-border": "#ceddee",
-          "border": "#383838",
-          "input-bg": "#4f4f4f",
-          "input-border": "#696969",
-          "input-text-default": "#dadcdf",
-          "input-text-muted": "#bdbfc3",
-          "swatch-brand-default": "#212121",
-          "swatch-brand-hover": "#ffffff",
-          "swatch-brand-contrast": "#dadcdf",
-          "swatch-inverse-default": "",
-          "swatch-inverse-hover": "",
-          "swatch-inverse-muted": "#696969",
-          "swatch-passive-default": "#c2c2c2",
-          "swatch-passive-hover": "",
-          "swatch-passive-hover-outline": "#3B3B3B",
-          "swatch-passive-muted": "#bdbfc3",
-          "swatch-passive-contrast": "#000000",
-          "swatch-primary-default": "#73b0f2",
-          "swatch-primary-hover": "#7bafef",
-          "swatch-primary-muted": "",
-          "swatch-primary-muted-hover": "#2282f7",
-          "swatch-primary-gradient": "#4e85c8",
-          "swatch-primary-gradient-hover": "#76a1d5",
-          "swatch-primary-contrast": "#dadcdf",
-          "swatch-success-background": "rgba(0, 188, 140, 0)",
-          "swatch-success-default": "rgb(0, 188, 140)",
-          "swatch-success-hover": "#00f0b4",
-          "swatch-success-muted": "rgba(0, 188, 140, .5)",
-          "swatch-success-contrast": "#000000",
-          "swatch-warning-background": "rgba(0,0,0,0)",
-          "swatch-warning-default": "rgb(232, 191, 73)",
-          "swatch-warning-hover": "#eed077",
-          "swatch-warning-muted": "rgba(232, 178, 19, .5)",
-          "swatch-danger-default": "rgb(255, 72, 53)",
-          "swatch-danger-hover": "#ff7566",
-          "swatch-danger-muted": "rgba(255, 72, 53, .5)",
-          "swatch-danger-contrast": "#dadcdf",
-          "swatch-warning-contrast": "#000000",
-          "text-default": "#dadcdf",
-          "text-inverse": "#000000",
-          "text-muted": "#c2c2c2",
-          "icon-folder": "rgb(44, 101, 255)",
-          "icon-archive": "rgb(255, 207, 1)",
-          "icon-image": "rgb(255, 111, 0)",
-          "icon-spreadsheet": "rgb(0, 182, 87)",
-          "icon-document": "rgb(44, 101, 255)",
-          "icon-video": "rgb(0, 187, 219)",
-          "icon-audio": "rgb(208, 67, 236)",
-          "icon-presentation": "rgb(255, 64, 6)",
-          "icon-pdf": "rgb(225, 5, 14)"
-        },
         "fontSizes": {
           "default": "",
           "large": "",
@@ -202,6 +65,136 @@
           "xxlarge": ""
         }
       }
-    }
-  ]
+    },
+    "themes": [
+      {
+        "isDark": false,
+        "name": "Light Theme",
+        "designTokens": {
+          "colorPalette": {
+            "background-accentuate": "rgba(255, 255, 5, 0.1)",
+            "background-default": "#ffffff",
+            "background-highlight": "#edf3fa",
+            "background-muted": "#f8f8f8",
+            "background-secondary": "#ffffff",
+            "background-hover": "rgb(236, 236, 236)",
+            "color-components-apptopbar-background": "transparent",
+            "color-components-apptopbar-border": "#ceddee",
+            "border": "#ecebee",
+            "input-bg": "#ffffff",
+            "input-border": "#ceddee",
+            "input-text-default": "#041e42",
+            "input-text-muted": "#4c5f79",
+            "swatch-brand-default": "#041e42",
+            "swatch-brand-hover": "#223959",
+            "swatch-brand-contrast": "#ffffff",
+            "swatch-danger-contrast": "#ffffff",
+            "swatch-danger-default": "rgb(197, 48, 48)",
+            "swatch-danger-hover": "#b12b2b",
+            "swatch-danger-muted": "rgb(204, 117, 117)",
+            "swatch-inverse-default": "#ffffff",
+            "swatch-inverse-hover": "#ffffff",
+            "swatch-inverse-muted": "#bfbfbf",
+            "swatch-passive-default": "#4c5f79",
+            "swatch-passive-hover": "#43536b",
+            "swatch-passive-hover-outline": "#f7fafd",
+            "swatch-passive-muted": "#283e5d",
+            "swatch-passive-contrast": "#ffffff",
+            "swatch-primary-default": "#4a76ac",
+            "swatch-primary-hover": "#80a7d7",
+            "swatch-primary-muted": "#2c588e",
+            "swatch-primary-muted-hover": "rgb(36, 75, 119)",
+            "swatch-primary-gradient": "#4e85c8",
+            "swatch-primary-gradient-hover": "rgb(59, 118, 194)",
+            "swatch-primary-contrast": "#ffffff",
+            "swatch-success-default": "rgb(3, 84, 63)",
+            "swatch-success-hover": "#023b2c",
+            "swatch-success-muted": "rgb(83, 150, 10)",
+            "swatch-success-contrast": "#ffffff",
+            "swatch-warning-default": "rgb(183, 76, 27)",
+            "swatch-warning-hover": "#a04318",
+            "swatch-warning-muted": "rgba(183, 76, 27, .5)",
+            "swatch-warning-contrast": "#ffffff",
+            "text-default": "#041e42",
+            "text-inverse": "#ffffff",
+            "text-muted": "#4c5f79",
+            "icon-folder": "#4d7eaf",
+            "icon-archive": "#fbbe54",
+            "icon-image": "#ee6b3b",
+            "icon-spreadsheet": "#15c286",
+            "icon-document": "#3b44a6",
+            "icon-video": "#045459",
+            "icon-audio": "#700460",
+            "icon-presentation": "#ee6b3b",
+            "icon-pdf": "#ec0d47"
+          }
+        }
+      },
+      {
+        "isDark": true,
+        "name": "Dark Theme",
+        "designTokens": {
+          "colorPalette": {
+            "background-accentuate": "#696969",
+            "background-default": "#292929",
+            "background-highlight": "#383838",
+            "background-muted": "#383838",
+            "background-secondary": "#4f4f4f",
+            "background-hover": "#383838",
+            "color-components-apptopbar-background": "transparent",
+            "color-components-apptopbar-border": "#ceddee",
+            "border": "#383838",
+            "input-bg": "#4f4f4f",
+            "input-border": "#696969",
+            "input-text-default": "#dadcdf",
+            "input-text-muted": "#bdbfc3",
+            "swatch-brand-default": "#212121",
+            "swatch-brand-hover": "#ffffff",
+            "swatch-brand-contrast": "#dadcdf",
+            "swatch-inverse-default": "",
+            "swatch-inverse-hover": "",
+            "swatch-inverse-muted": "#696969",
+            "swatch-passive-default": "#c2c2c2",
+            "swatch-passive-hover": "",
+            "swatch-passive-hover-outline": "#3B3B3B",
+            "swatch-passive-muted": "#bdbfc3",
+            "swatch-passive-contrast": "#000000",
+            "swatch-primary-default": "#73b0f2",
+            "swatch-primary-hover": "#7bafef",
+            "swatch-primary-muted": "",
+            "swatch-primary-muted-hover": "#2282f7",
+            "swatch-primary-gradient": "#4e85c8",
+            "swatch-primary-gradient-hover": "#76a1d5",
+            "swatch-primary-contrast": "#dadcdf",
+            "swatch-success-background": "rgba(0, 188, 140, 0)",
+            "swatch-success-default": "rgb(0, 188, 140)",
+            "swatch-success-hover": "#00f0b4",
+            "swatch-success-muted": "rgba(0, 188, 140, .5)",
+            "swatch-success-contrast": "#000000",
+            "swatch-warning-background": "rgba(0,0,0,0)",
+            "swatch-warning-default": "rgb(232, 191, 73)",
+            "swatch-warning-hover": "#eed077",
+            "swatch-warning-muted": "rgba(232, 178, 19, .5)",
+            "swatch-danger-default": "rgb(255, 72, 53)",
+            "swatch-danger-hover": "#ff7566",
+            "swatch-danger-muted": "rgba(255, 72, 53, .5)",
+            "swatch-danger-contrast": "#dadcdf",
+            "swatch-warning-contrast": "#000000",
+            "text-default": "#dadcdf",
+            "text-inverse": "#000000",
+            "text-muted": "#c2c2c2",
+            "icon-folder": "rgb(44, 101, 255)",
+            "icon-archive": "rgb(255, 207, 1)",
+            "icon-image": "rgb(255, 111, 0)",
+            "icon-spreadsheet": "rgb(0, 182, 87)",
+            "icon-document": "rgb(44, 101, 255)",
+            "icon-video": "rgb(0, 187, 219)",
+            "icon-audio": "rgb(208, 67, 236)",
+            "icon-presentation": "rgb(255, 64, 6)",
+            "icon-pdf": "rgb(225, 5, 14)"
+          }
+        }
+      }
+    ]
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4fc2af38bba..d613cb553a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -747,6 +747,9 @@ importers:
       p-queue:
         specifier: ^6.6.2
         version: 6.6.2
+      pinia:
+        specifier: 2.1.7
+        version: 2.1.7(typescript@5.0.3)(vue@3.3.8)
       qs:
         specifier: 6.11.2
         version: 6.11.2
@@ -1040,6 +1043,9 @@ importers:
       axios:
         specifier: 1.6.2
         version: 1.6.2
+      deepmerge:
+        specifier: ^4.2.2
+        version: 4.2.2
       design-system:
         specifier: workspace:@ownclouders/design-system@*
         version: link:../design-system
@@ -17396,7 +17402,7 @@ packages:
       '@vue/devtools-api': 6.5.0
       typescript: 5.0.3
       vue: 3.3.8(typescript@5.0.3)
-      vue-demi: 0.14.5(vue@3.3.8)
+      vue-demi: 0.14.6(vue@3.3.8)
     dev: false
 
   /pinkie-promise@2.0.1: