Light/dark override for in-app login dialogs to match app style e.g. light only

frontend/auth/restricted/RestrictedApi.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import RestrictedAuth from '@/components/RestrictedAuth.vue'
 
 // Check if this is a remote auth URL: /auth/{token}
@@ -30,14 +30,9 @@ function extractRemoteToken() {
   return null
 }
 
-// Detect mode from URL hash fragment
-const authMode = computed(() => {
-  const params = new URLSearchParams(window.location.hash.slice(1))
-  const mode = params.get('mode')
-  if (mode === 'reauth') return 'reauth'
-  if (mode === 'forbidden') return 'forbidden'
-  return 'login'
-})
+// Parse URL hash fragment
+const hashParams = new URLSearchParams(window.location.hash.slice(1))
+const authMode = ['reauth', 'forbidden'].includes(hashParams.get('mode')) ? hashParams.get('mode') : 'login'
 
 function postToParent(message) {
   if (window.parent && window.parent !== window) {

frontend/auth/restricted/main.js

@@ -1,3 +1,4 @@
+import './theme.js'
 import { createApp } from 'vue'
 import RestrictedApi from './RestrictedApi.vue'
 import '@/assets/style.css'

frontend/auth/restricted/theme.js

@@ -0,0 +1,72 @@
+// Early theme override script - runs before Vue to prevent flicker
+// Parses ?theme=light or ?theme=dark from URL hash and injects CSS overrides
+
+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() {
+  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)
+  }
+}
+
+applyTheme()
+addEventListener('hashchange', applyTheme)

frontend/src/assets/style.css

@@ -78,7 +78,6 @@ html {
 }
 
 body {
-  color-scheme: light dark;
   overflow: auto;
   scrollbar-gutter: stable;
   height: 100%;