feat: [OCISDEV-710] add theme mode

Added a new property to the theme called `mode`. This property specifies
whether the theme is suitable for regular mode or vault mode.
Valid values are `regular` and `vault`.

Author: LukasHirt

changelog/unreleased/enhancement-add-theme-mode.md

@@ -0,0 +1,6 @@
+Enhancement: Add theme mode
+
+We've added a new property to the theme called `mode`. This property specifies whether the theme is suitable for regular mode or vault mode.
+Valid values are `regular` and `vault`.
+
+https://github.com/owncloud/web/pull/13631

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

@@ -5,6 +5,7 @@ import { useLocalStorage, usePreferredDark } from '@vueuse/core'
 import { z } from 'zod'
 import { applyCustomProp } from '@ownclouders/design-system/helpers'
 import { ShareRole } from '@ownclouders/web-client'
+import { useVault } from '../vault'
 
 const AppBanner = z.object({
   title: z.string().optional(),
@@ -76,6 +77,11 @@ const WebTheme = z.object({
   common: CommonSection.optional(),
   designTokens: DesignTokens.optional(),
   isDark: z.boolean(),
+  /**
+   * Specifies whether the theme is suitable for regular mode or vault mode.
+   * If not specified, the theme is suitable for regular mode.
+   */
+  mode: z.optional(z.enum(['regular', 'vault']).default('regular')),
   name: z.string(),
   loginPage: LoginPage.optional(),
   logo: Logo.optional(),
@@ -103,13 +109,24 @@ export const useThemeStore = defineStore('theme', () => {
   const currentLocalStorageThemeName = useLocalStorage(themeStorageKey, null)
 
   const isDark = usePreferredDark()
+  const { isInVault } = useVault()
 
   const currentTheme = ref<WebThemeType | undefined>()
 
-  const availableThemes = ref<WebThemeType[]>([])
+  const themes = ref<WebThemeType[]>([])
+
+  const availableThemes = computed(() => {
+    return unref(themes).filter((theme) => {
+      if (unref(isInVault)) {
+        return theme.mode === 'vault'
+      }
+
+      return theme.mode === 'regular' || theme.mode === undefined
+    })
+  })
 
   const initializeThemes = (themeConfig: WebThemeConfigType) => {
-    availableThemes.value = themeConfig.themes.map((theme) =>
+    themes.value = themeConfig.themes.map((theme) =>
       merge<WebThemeType>(themeConfig.defaults, theme)
     )
     setThemeFromStorageOrSystem()

packages/web-pkg/src/composables/vault/index.ts

@@ -0,0 +1,31 @@
+/**
+ * This composable is used for various vault-related functionality.
+ */
+interface VaultComposable {
+  /**
+   * Checks whether the user is currently in the vault.
+   * This is not reactive value because a full page reload is required to switch between regular and vault mode.
+   */
+  isInVault: boolean
+}
+
+export function useVault(): VaultComposable {
+  const isInVault = (() => {
+    const { pathname, hash } = window.location
+
+    if (pathname.startsWith('/vault')) {
+      return true
+    }
+
+    if (hash) {
+      const vaultHashPattern = /^#\/vault(?:\/|$)/
+      return vaultHashPattern.test(hash)
+    }
+
+    return false
+  })()
+
+  return {
+    isInVault
+  }
+}

packages/web-runtime/src/components/Topbar/UserMenu.vue

@@ -184,7 +184,10 @@ export default defineComponent({
 
     const accountPageRoute = computed(() => ({
       name: 'account',
-      query: routeToContextQuery(unref(route))
+      query: routeToContextQuery(unref(route)),
+      params: {
+        scope: unref(route).params.scope
+      }
     }))
 
     const loginLink = computed(() => {

packages/web-runtime/src/router/index.ts

@@ -84,7 +84,7 @@ const routes = [
     meta: { title: $gettext('Access denied'), authContext: 'anonymous' }
   },
   {
-    path: '/account',
+    path: '/:scope(vault)?/account',
     name: 'account',
     component: Account,
     meta: { title: $gettext('Account'), authContext: 'hybrid' }