From a216be8480b3c6ac3d75b568d506f86b0f11aaf4 Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Fri, 22 May 2026 14:40:23 +0200
Subject: [PATCH 1/3] fix(lib-vuetify): capitalize i18n labels in
 theme-switcher

Theme switcher options (default, dark, high contrast, dark and high contrast)
now start with a capital letter in both locales.
---
 packages/vuetify/theme-switcher.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/vuetify/theme-switcher.vue b/packages/vuetify/theme-switcher.vue
index 16f18cd..3b80c45 100644
--- a/packages/vuetify/theme-switcher.vue
+++ b/packages/vuetify/theme-switcher.vue
@@ -39,17 +39,17 @@
 fr:
   themeSwitch: Changer de thème
   theme:
-    default: par défaut
-    dark: sombre
-    hc: contraste élevé
-    hcDark: sombre et contraste élevé
+    default: Par défaut
+    dark: Sombre
+    hc: Contraste élevé
+    hcDark: Sombre et contraste élevé
 en:
   themeSwitch: Change theme
   theme:
-    default: default
-    dark: dark
-    hc: high contrast
-    hcDark: dark and high contrast
+    default: Default
+    dark: Dark
+    hc: High contrast
+    hcDark: Dark and high contrast
 </i18n>
 
 <script setup lang="ts">

From 2f43dc55b5e6d0545cd6e3a2ed4d526e5cce4b81 Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Mon, 11 May 2026 10:14:03 +0200
Subject: [PATCH 2/3] feat(lib-vue,lib-vuetify): add 'system' theme option
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the OS theme preference (prefers-color-scheme, forced-colors) was
only consulted once on the very first visit; after that the resolved value was
locked in the `theme` cookie and never re-evaluated. On mobile devices that
toggle light/dark over the day, the chosen theme could not follow the OS.

- Add `'system'` to the `Theme` union and store it explicitly in the cookie.
- New `resolveTheme()` helper derives the effective theme via `getDefaultTheme`
  when the user is on 'system' (or when the cookie is absent, which is now
  treated as an implicit 'system' choice).
- Listen to `prefers-color-scheme` and `forced-colors` matchMedia changes and
  re-apply the theme reactively while the user is on 'system' — no reload.
- Expose a 'system' radio option in the theme-switcher (i18n: Système / System).

simple-directory does not read the theme cookie server-side (verified across
its api/ and ui/ sources) and reuses lib-vuetify's theme-switcher directly, so
the new cookie value is transparently handled there too.
---
 packages/vue/session.ts             | 35 ++++++++++++++++++++++-------
 packages/vuetify/theme-switcher.vue |  5 ++++-
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/packages/vue/session.ts b/packages/vue/session.ts
index dbe62db..41fd02c 100644
--- a/packages/vue/session.ts
+++ b/packages/vue/session.ts
@@ -82,7 +82,8 @@ export interface SiteInfo {
   owner: AccountKeys
 }
 
-type Theme = 'default' | 'dark' | 'hc' | 'hc-dark'
+type AppliedTheme = 'default' | 'dark' | 'hc' | 'hc-dark'
+type Theme = AppliedTheme | 'system'
 
 export interface Session {
   state: SessionState
@@ -120,16 +121,21 @@ export type SessionAuthenticated = Omit<Session, 'state' | 'user' | 'account' |
 const debug = Debug('session')
 debug.log = console.log.bind(console)
 
-function getDefaultTheme (site: FullSiteInfo): Theme {
+function getDefaultTheme (site: FullSiteInfo): AppliedTheme {
   // see https://www.scottohara.me/blog/2021/10/01/detect-high-contrast-and-dark-modes.html
-  const preferDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-  const preferHC = window.matchMedia && window.matchMedia('(forced-colors: active)').matches
+  const preferDark = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  const preferHC = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(forced-colors: active)').matches
   if (site.theme.hcDark && preferDark && preferHC) return 'hc-dark'
   if (site.theme.hc && preferHC) return 'hc'
   if (site.theme.dark && preferDark) return 'dark'
   return 'default'
 }
 
+function resolveTheme (userTheme: Theme | null, site: FullSiteInfo): AppliedTheme {
+  if (userTheme && userTheme !== 'system') return userTheme
+  return getDefaultTheme(site)
+}
+
 function jwtDecodeAlive (jwt: string | null): User | undefined {
   if (!jwt) return
   const decoded = jwtDecode(jwt) as any
@@ -403,6 +409,9 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
   const setSiteInfo = (siteInfo: any) => {
     if (siteInfo.theme) {
       fullSite.value = siteInfo
+      // an absent cookie is treated as an implicit 'system' choice so the
+      // theme-switcher radio has a value to bind to.
+      if (theme.value == null) theme.value = 'system'
       const partialSite: SiteInfo = {
         main: siteInfo.main,
         isAccountMain: siteInfo.isAccountMain,
@@ -412,13 +421,13 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
         authOnlyOtherSite: siteInfo.authOnlyOtherSite,
         owner: siteInfo.owner
       }
-      if (theme.value == null) theme.value = getDefaultTheme(siteInfo)
-      if (theme.value === 'hc') partialSite.colors = siteInfo.theme.hcColors
-      if (theme.value === 'dark') {
+      const applied = resolveTheme(theme.value, siteInfo)
+      if (applied === 'hc') partialSite.colors = siteInfo.theme.hcColors
+      if (applied === 'dark') {
         partialSite.colors = siteInfo.theme.darkColors
         partialSite.dark = true
       }
-      if (theme.value === 'hc-dark') {
+      if (applied === 'hc-dark') {
         partialSite.colors = siteInfo.theme.hcDarkColors
         partialSite.dark = true
       }
@@ -433,6 +442,16 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
   // @ts-ignore
   if (!ssr && window.__PUBLIC_SITE_INFO) setSiteInfo(window.__PUBLIC_SITE_INFO)
 
+  // re-apply the theme when the OS preference changes while the user is on
+  // 'system'. Important for mobile devices that switch light/dark over the day.
+  if (!ssr && typeof window !== 'undefined' && window.matchMedia) {
+    const onOsPrefChange = () => {
+      if (theme.value === 'system' && fullSite.value) setSiteInfo(fullSite.value)
+    }
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', onOsPrefChange)
+    window.matchMedia('(forced-colors: active)').addEventListener('change', onOsPrefChange)
+  }
+
   // immediately performs a keepalive, but only on top windows (not iframes or popups)
   // and only if it was not done very recently (maybe from a refreshed page next to this one)
   // also run an auto-refresh loop
diff --git a/packages/vuetify/theme-switcher.vue b/packages/vuetify/theme-switcher.vue
index 3b80c45..b57abb3 100644
--- a/packages/vuetify/theme-switcher.vue
+++ b/packages/vuetify/theme-switcher.vue
@@ -22,8 +22,9 @@
             color="primary"
             hide-details
             :label="t('themeSwitch')"
-            @update:modelValue="value => session.switchTheme(value as 'default' | 'dark' | 'hc' | 'hc-dark')"
+            @update:modelValue="value => session.switchTheme(value as 'default' | 'dark' | 'hc' | 'hc-dark' | 'system')"
           >
+            <v-radio :label="t('theme.system')" value="system"></v-radio>
             <v-radio :label="t('theme.default')" value="default"></v-radio>
             <v-radio v-if="session.fullSite.value?.theme.dark" :label="t('theme.dark')" value="dark"></v-radio>
             <v-radio v-if="session.fullSite.value?.theme.hc":label="t('theme.hc')" value="hc"></v-radio>
@@ -39,6 +40,7 @@
 fr:
   themeSwitch: Changer de thème
   theme:
+    system: Système
     default: Par défaut
     dark: Sombre
     hc: Contraste élevé
@@ -46,6 +48,7 @@ fr:
 en:
   themeSwitch: Change theme
   theme:
+    system: System
     default: Default
     dark: Dark
     hc: High contrast

From 87060e82eb913c687d9ff3bb75d5157d1ecc6d47 Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Tue, 19 May 2026 15:55:09 +0200
Subject: [PATCH 3/3] feat(lib-vue,lib-vuetify): export resolveTheme and allow
 theme-switcher host-provided theme offers

---
 packages/vue/session.ts             | 48 +++++++++++++++++++----------
 packages/vuetify/index.ts           |  9 ++++--
 packages/vuetify/theme-switcher.vue | 31 +++++++++++++------
 3 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/packages/vue/session.ts b/packages/vue/session.ts
index 41fd02c..bbbbc75 100644
--- a/packages/vue/session.ts
+++ b/packages/vue/session.ts
@@ -57,16 +57,16 @@ export interface Colors {
   'on-admin': string
 }
 
-interface FullSiteInfo {
+export interface FullSiteInfo {
   main?: boolean
   theme: {
     logo?: string
     colors: Colors
-    dark: boolean
+    dark?: boolean
     darkColors?: Colors
-    hc: boolean
+    hc?: boolean
     hcColors?: Colors
-    hcDark: boolean
+    hcDark?: boolean
     hcDarkColors?: Colors
   }
 }
@@ -82,8 +82,14 @@ export interface SiteInfo {
   owner: AccountKeys
 }
 
-type AppliedTheme = 'default' | 'dark' | 'hc' | 'hc-dark'
-type Theme = AppliedTheme | 'system'
+export type AppliedTheme = 'default' | 'dark' | 'hc' | 'hc-dark'
+// `theme` cookie semantics:
+//  - absent: implicit 'system' (no choice made yet)
+//  - 'system': explicit "follow the OS preference"
+//  - other: explicit override
+// In both 'system' cases the applied theme is computed at runtime via
+// resolveTheme() using prefers-color-scheme + forced-colors.
+export type Theme = AppliedTheme | 'system'
 
 export interface Session {
   state: SessionState
@@ -121,7 +127,23 @@ export type SessionAuthenticated = Omit<Session, 'state' | 'user' | 'account' |
 const debug = Debug('session')
 debug.log = console.log.bind(console)
 
-function getDefaultTheme (site: FullSiteInfo): AppliedTheme {
+// loose shape: hosts whose Colors are partially optional (e.g. portal config) can pass their own type
+export type ThemeOffers = {
+  theme: {
+    dark?: boolean
+    hc?: boolean
+    hcDark?: boolean
+  }
+}
+
+/**
+ * Resolves a user theme preference to a concrete AppliedTheme — returns the explicit choice when set,
+ * otherwise picks the best variant offered by `site` based on the OS `prefers-color-scheme` / `forced-colors`
+ * media queries. Always call this before handing a theme name to Vuetify: its built-in `'system'` defaultTheme
+ * bypasses custom themes and falls back to its own light/dark.
+ */
+export function resolveTheme (userTheme: Theme | null, site: ThemeOffers): AppliedTheme {
+  if (userTheme && userTheme !== 'system') return userTheme
   // see https://www.scottohara.me/blog/2021/10/01/detect-high-contrast-and-dark-modes.html
   const preferDark = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
   const preferHC = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(forced-colors: active)').matches
@@ -131,11 +153,6 @@ function getDefaultTheme (site: FullSiteInfo): AppliedTheme {
   return 'default'
 }
 
-function resolveTheme (userTheme: Theme | null, site: FullSiteInfo): AppliedTheme {
-  if (userTheme && userTheme !== 'system') return userTheme
-  return getDefaultTheme(site)
-}
-
 function jwtDecodeAlive (jwt: string | null): User | undefined {
   if (!jwt) return
   const decoded = jwtDecode(jwt) as any
@@ -200,7 +217,9 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
   // cookies are the source of truth and this information is transformed into the state reactive object
   const cookies = initOptions?.cookies ?? new Cookies(options.req?.headers.cookie)
   const readState = () => {
-    theme.value = cookies.get('theme') ?? null
+    // absent cookie is treated as implicit 'system' so consumers (theme-switcher
+    // radios, host plugins) always have a meaningful value to bind to.
+    theme.value = (cookies.get('theme') as Theme | undefined) ?? 'system'
 
     const langCookie = cookies.get('i18n_lang')
     state.lang = langCookie ?? options.defaultLang
@@ -409,9 +428,6 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
   const setSiteInfo = (siteInfo: any) => {
     if (siteInfo.theme) {
       fullSite.value = siteInfo
-      // an absent cookie is treated as an implicit 'system' choice so the
-      // theme-switcher radio has a value to bind to.
-      if (theme.value == null) theme.value = 'system'
       const partialSite: SiteInfo = {
         main: siteInfo.main,
         isAccountMain: siteInfo.isAccountMain,
diff --git a/packages/vuetify/index.ts b/packages/vuetify/index.ts
index cdf8586..fd32cd8 100644
--- a/packages/vuetify/index.ts
+++ b/packages/vuetify/index.ts
@@ -1,4 +1,4 @@
-import { type Session } from '@data-fair/lib-vue/session.js'
+import { resolveTheme, type Session } from '@data-fair/lib-vue/session.js'
 import { VuetifyOptions } from 'vuetify'
 import { fr, en } from 'vuetify/locale'
 
@@ -20,6 +20,9 @@ const baseDarkColors = {
 export function vuetifySessionOptions (session: Session, cspNonce?: string): VuetifyOptions {
   if (!session.site.value) throw new Error('vuetifySessionOptions requires fetching site info in session util')
   const colors = { ...baseColors, ...session.site.value?.colors }
+  const themeName = session.fullSite.value
+    ? resolveTheme(session.theme.value, session.fullSite.value)
+    : 'default'
   return {
     ssr: false,
     locale: {
@@ -28,9 +31,9 @@ export function vuetifySessionOptions (session: Session, cspNonce?: string): Vue
     },
     theme: {
       cspNonce,
-      defaultTheme: session.theme.value ?? 'default',
+      defaultTheme: themeName,
       themes: {
-        [session.theme.value ?? 'default']: {
+        [themeName]: {
           dark: session.site.value?.dark,
           colors,
           variables: {
diff --git a/packages/vuetify/theme-switcher.vue b/packages/vuetify/theme-switcher.vue
index b57abb3..d9bb460 100644
--- a/packages/vuetify/theme-switcher.vue
+++ b/packages/vuetify/theme-switcher.vue
@@ -1,20 +1,20 @@
 <template>
-  <v-toolbar-items class="theme-switcher" v-if="session.fullSite.value?.theme.dark || session.fullSite.value?.theme.hc || session.fullSite.value?.theme.hcDark">
+  <v-toolbar-items v-if="hasDark || hasHc || hasHcDark">
     <v-menu
       offset-y
       class="ml-n4"
       style="z-index: 2600; /* Higher than agent-chat's 2500 */"
     >
-      <template #activator="{props: activatorProps}">
+      <template #activator="{ props }">
         <v-btn
-          class="px-0"
-          :icon="mdiThemeLightDark"
+          v-bind="props"
           :title="t('themeSwitch')"
-          v-bind="activatorProps"
+          :icon="mdiThemeLightDark"
+          stacked
         />
       </template>
 
-      <v-list class="border-sm">
+      <v-list>
         <v-list-item density="compact" class="pl-0">
           <v-radio-group
             :model-value="session.theme.value"
@@ -26,9 +26,9 @@
           >
             <v-radio :label="t('theme.system')" value="system"></v-radio>
             <v-radio :label="t('theme.default')" value="default"></v-radio>
-            <v-radio v-if="session.fullSite.value?.theme.dark" :label="t('theme.dark')" value="dark"></v-radio>
-            <v-radio v-if="session.fullSite.value?.theme.hc":label="t('theme.hc')" value="hc"></v-radio>
-            <v-radio v-if="session.fullSite.value?.theme.hcDark" :label="t('theme.hcDark')" value="hc-dark"></v-radio>
+            <v-radio v-if="hasDark" :label="t('theme.dark')" value="dark"></v-radio>
+            <v-radio v-if="hasHc" :label="t('theme.hc')" value="hc"></v-radio>
+            <v-radio v-if="hasHcDark" :label="t('theme.hcDark')" value="hc-dark"></v-radio>
           </v-radio-group>
         </v-list-item>
       </v-list>
@@ -56,13 +56,26 @@ en:
 </i18n>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useSession } from '@data-fair/lib-vue/session.js'
 import { useI18n } from 'vue-i18n'
 import { mdiThemeLightDark } from '@mdi/js'
 
+// Optional `theme` lets hosts that don't expose their config through
+// session.fullSite (e.g. the public Nuxt portal, where the theme lives in
+// portalConfig) drive which radios are shown. Falls back to
+// session.fullSite.value?.theme — the historical behaviour for data-fair UIs.
+const props = defineProps<{
+  theme?: { dark?: boolean, hc?: boolean, hcDark?: boolean }
+}>()
 
 const session = useSession()
 
+const effectiveTheme = computed(() => props.theme ?? session.fullSite.value?.theme)
+const hasDark = computed(() => !!effectiveTheme.value?.dark)
+const hasHc = computed(() => !!effectiveTheme.value?.hc)
+const hasHcDark = computed(() => !!effectiveTheme.value?.hcDark)
+
 const { t } = useI18n({ useScope: 'local' })
 </script>