Light/dark selection in user profile, if set this is preferred on the whole system, together with app overrides (the first one on the URL wins).

frontend/auth/admin/main.js

@@ -1,3 +1,6 @@
+import { initThemeFromCache } from '@/utils/theme'
+initThemeFromCache()
+
 import '@/assets/style.css'
 
 import { createApp } from 'vue'

frontend/auth/main.js

@@ -1,3 +1,6 @@
+import { initThemeFromCache } from '@/utils/theme'
+initThemeFromCache()
+
 import '@/assets/style.css'
 
 import { createApp } from 'vue'

frontend/auth/restricted/theme.js

@@ -1,72 +1,11 @@
-// Early theme override script - runs before Vue to prevent flicker
-// Parses ?theme=light or ?theme=dark from URL hash and injects CSS overrides
+// Early theme for restricted app - first URL param wins, then localStorage
+import { themeColors, applyTheme, getCachedTheme } from '@/utils/theme.js'
 
-const themeColors = {
-  light: {
-    'color-canvas': '#ffffff',
-    'color-surface': '#eff6ff',
-    'color-surface-subtle': '#dbeafe',
-    'color-border': '#2563eb',
-    'color-border-strong': '#1e40af',
-    'color-heading': '#1e3a8a',
-    'color-text': '#1e293b',
-    'color-text-muted': '#475569',
-    'color-link': '#1d4ed8',
-    'color-link-hover': '#1e40af',
-    'color-accent': '#2563eb',
-    'color-accent-strong': '#1e40af',
-    'color-accent-contrast': '#ffffff',
-    'color-success-text': '#166534',
-    'color-success-bg': '#dcfce7',
-    'color-error-text': '#b91c1c',
-    'color-error-bg': '#fee2e2',
-    'color-info-text': '#1e40af',
-    'color-info-bg': '#dbeafe',
-    'color-danger': '#dc2626',
-    'shadow-soft': '0 10px 30px rgba(30, 64, 175, 0.15)',
-  },
-  dark: {
-    'color-canvas': '#0f172a',
-    'color-surface': '#141b2f',
-    'color-surface-subtle': '#1b243b',
-    'color-border': '#25304a',
-    'color-border-strong': '#3d4d6b',
-    'color-heading': '#fff',
-    'color-text': '#e2e8f0',
-    'color-text-muted': '#94a3b8',
-    'color-link': '#60a5fa',
-    'color-link-hover': '#93c5fd',
-    'color-accent': '#60a5fa',
-    'color-accent-strong': '#3b82f6',
-    'color-accent-contrast': '#0b1120',
-    'color-success-text': '#34d399',
-    'color-success-bg': '#1a4d2e',
-    'color-error-text': '#fca5a5',
-    'color-error-bg': '#4a1f1f',
-    'color-info-text': '#bae6fd',
-    'color-info-bg': '#1e3a5f',
-    'color-danger': '#f87171',
-    'shadow-soft': '0 0 0 #000000',
-  }
-}
-
-const STYLE_ID = 'theme-override'
-
-function applyTheme() {
+function getTheme() {
   const params = new URLSearchParams(location.hash.slice(1))
-  const theme = params.get('theme')
-
-  // Remove existing override
-  document.getElementById(STYLE_ID)?.remove()
-
-  if (theme && themeColors[theme]) {
-    const css = `.surface { ${Object.entries(themeColors[theme]).map(([k, v]) => `--${k}: ${v}`).join('; ')}; }`
-    const style = document.createElement('style')
-    style.id = STYLE_ID
-    style.textContent = css
-    document.head.appendChild(style)
-  }
+  return params.get('theme') || getCachedTheme() || ''
 }
 
-applyTheme()
-addEventListener('hashchange', applyTheme)
+// Use .surface selector to preserve transparent background
+applyTheme(getTheme(), '.surface')
+addEventListener('hashchange', () => applyTheme(getTheme(), '.surface'))

frontend/src/assets/style.css

@@ -131,6 +131,7 @@ a:focus-visible {
 }
 
 .view-root {
+  position: relative;
   flex: 1;
   width: 100%;
   display: flex;

frontend/src/components/ProfileView.vue

@@ -1,5 +1,15 @@
 <template>
   <section class="view-root" data-view="profile">
+    <div class="theme-toggle">
+      <button class="theme-btn" @click="themeMenuOpen = !themeMenuOpen" :title="themeTitle">
+        {{ themeEmoji }}
+      </button>
+      <div v-if="themeMenuOpen" class="theme-menu" @click="themeMenuOpen = false">
+        <button class="theme-option top" :class="{ active: selectedTheme === '' }" @click.stop="setTheme('')" title="Auto">🌓</button>
+        <button class="theme-option left" :class="{ active: selectedTheme === 'light' }" @click.stop="setTheme('light')" title="Light">☀️</button>
+        <button class="theme-option right" :class="{ active: selectedTheme === 'dark' }" @click.stop="setTheme('dark')" title="Dark">🌙</button>
+      </div>
+    </div>
     <header class="view-header">
       <h1>User Profile</h1>
       <Breadcrumbs ref="breadcrumbs" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
@@ -129,6 +139,7 @@ import passkey from '@/utils/passkey'
 import { goBack } from '@/utils/helpers'
 import { apiJson } from 'paskia'
 import { navigateButtonRow, focusPreferred, focusAtIndex, getDirection } from '@/utils/keynav'
+import { updateThemeFromSession } from '@/utils/theme'
 
 const authStore = useAuthStore()
 const updateInterval = ref(null)
@@ -148,6 +159,22 @@ const breadcrumbs = ref(null)
 const userBasicInfo = ref(null)
 const userInfoSection = ref(null)
 
+// Theme preference
+const selectedTheme = ref('')
+const themeMenuOpen = ref(false)
+const themeEmoji = computed(() => ({ '': '🌓', light: '☀️', dark: '🌙' })[selectedTheme.value] || '🌓')
+const themeTitle = computed(() => ({ '': 'Auto (system)', light: 'Light mode', dark: 'Dark mode' })[selectedTheme.value] || 'Theme')
+watch(() => authStore.userInfo?.ctx?.user?.theme, (t) => { selectedTheme.value = t || '' }, { immediate: true })
+function setTheme(theme) {
+  selectedTheme.value = theme
+  themeMenuOpen.value = false
+  // Apply immediately for instant feedback
+  updateThemeFromSession({ user: { theme } }, true)
+  // Save to server in background
+  apiJson('/auth/api/user/theme', { method: 'PATCH', body: { theme } })
+    .catch(e => authStore.showMessage(e.message, 'error'))
+}
+
 // Check if any modal/dialog is open (blocks arrow key navigation)
 const hasActiveModal = computed(() => showNameDialog.value || showRegLink.value)
 
@@ -352,8 +379,16 @@ const saveName = async () => {
 .logout-note { margin: 0.75rem 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
 .remote-auth-inline { display: flex; flex-direction: column; gap: 0.5rem; }
 .remote-auth-label { display: block; margin: 0; font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; }
-.remote-auth-description {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-}
+.remote-auth-description { font-size: 0.75rem; color: var(--color-text-muted); }
+.theme-toggle { position: absolute; top: var(--layout-padding); right: var(--layout-padding); }
+.theme-btn { background: none; border: none; padding: 0.25rem; font-size: 1.25rem; cursor: pointer; opacity: 0.5; transition: opacity 0.15s; }
+.theme-btn:hover { opacity: 0.8; }
+.theme-menu { position: absolute; top: 100%; right: 0; width: 5rem; height: 4rem; margin-top: 0.25rem; }
+.theme-option { position: absolute; background: none; border: none; font-size: 1.25rem; cursor: pointer; opacity: 0.5; padding: 0.25rem; border-radius: var(--radius-sm); transition: opacity 0.15s, transform 0.15s; }
+.theme-option:hover { opacity: 1; transform: scale(1.2); }
+.theme-option.active { opacity: 1; }
+.theme-option.top { top: 0; left: 50%; transform: translateX(-50%); }
+.theme-option.top:hover { transform: translateX(-50%) scale(1.2); }
+.theme-option.left { bottom: 0; left: 0; }
+.theme-option.right { bottom: 0; right: 0; }
 </style>

frontend/src/stores/auth.js

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { register, authenticate } from '@/utils/passkey'
 import { getSettings } from '@/utils/settings'
 import { apiJson } from 'paskia'
+import { updateThemeFromSession } from '@/utils/theme'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
@@ -86,6 +87,7 @@ export const useAuthStore = defineStore('auth', {
     async loadUserInfo() {
       try {
         this.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
+        updateThemeFromSession(this.userInfo?.ctx)
         console.log('User info loaded:', this.userInfo)
       } catch (error) {
         // Suppress toast for 401/403 errors - the auth iframe will handle these