diff --git a/packages/vue/session.ts b/packages/vue/session.ts
index dbe62db..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,7 +82,14 @@ export interface SiteInfo {
   owner: AccountKeys
 }
 
-type Theme = 'default' | 'dark' | 'hc' | 'hc-dark'
+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
@@ -120,10 +127,26 @@ export type SessionAuthenticated = Omit<Session, 'state' | 'user' | 'account' |
 const debug = Debug('session')
 debug.log = console.log.bind(console)
 
-function getDefaultTheme (site: FullSiteInfo): Theme {
+// 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 = 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'
@@ -194,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
@@ -412,13 +437,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 +458,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/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 16f18cd..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"
@@ -22,12 +22,13 @@
             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>
-            <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>
@@ -39,27 +40,42 @@
 fr:
   themeSwitch: Changer de thème
   theme:
-    default: par défaut
-    dark: sombre
-    hc: contraste élevé
-    hcDark: sombre et contraste élevé
+    system: Système
+    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
+    system: System
+    default: Default
+    dark: Dark
+    hc: High contrast
+    hcDark: Dark and high contrast
 </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>