fix+feat: SPA routing, theme system, modern UI, setup wizard improvements

Fixes:
- Go server now serves index.html for all non-asset paths (SPA fallback)
- Null guard on data.documents prevents undefined.length TypeError
- App.vue waits for checkStatus() before rendering AppLayout (race condition)
- PWA manifest no longer references missing icon files
- index.html applies theme class before paint to prevent flash

Features:
- Theme store: dark/light toggle + 6 accent color presets + custom hex picker
- ThemeToggle component in header dropdown
- CSS custom properties for accent color (--accent-400/500/600/700)
- Tailwind accent-* color utilities driven by CSS vars
- SetupWizard: 3-step flow, password confirmation, LDAP test button,
  animated toggle, review step, proper error/success states
- Sidebar: loading skeleton, active page highlight, null-safe document list
- Global .input, .btn-primary, .btn-secondary, .card component classes
- Stub GraphQL responses for setup/login/testLdapConnection

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.vue

@@ -1,23 +1,42 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAppStore } from '@/stores/app'
+import { useThemeStore } from '@/stores/theme'
 import AppLayout from '@/components/layout/AppLayout.vue'
 
 const app = useAppStore()
+const theme = useThemeStore()
 const router = useRouter()
+const ready = ref(false)
 
-// If backend signals REQUIRE_SETUP, redirect to wizard.
-app.checkStatus().then(() => {
+onMounted(async () => {
+  theme.init()
+  await app.checkStatus()
   if (app.requiresSetup) {
     router.replace('/setup')
   }
+  ready.value = true
 })
-
-const showLayout = computed(() => !app.requiresSetup)
 </script>
 
 <template>
-  <AppLayout v-if="showLayout" />
-  <router-view v-else />
+  <!-- Splash while checking server status -->
+  <div
+    v-if="!ready"
+    class="min-h-screen flex items-center justify-center bg-white dark:bg-slate-900"
+  >
+    <div class="flex flex-col items-center gap-3 text-slate-400">
+      <svg class="animate-spin w-8 h-8 text-accent-500" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
+      </svg>
+      <span class="text-sm">Loading Archivum…</span>
+    </div>
+  </div>
+
+  <template v-else>
+    <AppLayout v-if="!app.requiresSetup" />
+    <router-view v-else />
+  </template>
 </template>

frontend/src/assets/main.css

@@ -2,22 +2,113 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ── Accent color variables (updated at runtime by ThemeStore) ─────────────── */
+:root {
+  --accent-400: 96 165 250;   /* blue-400  */
+  --accent-500: 59 130 246;   /* blue-500  */
+  --accent-600: 37 99 235;    /* blue-600  */
+  --accent-700: 29 78 216;    /* blue-700  */
+}
+
+/* ── Base element styles ────────────────────────────────────────────────────── */
 @layer base {
   html {
     font-family: 'Inter', ui-sans-serif, system-ui;
+    -webkit-font-smoothing: antialiased;
   }
 
-  /* AsciiDoc rendered output */
-  .adoc-content h1 { @apply text-2xl font-bold mb-4 mt-6; }
-  .adoc-content h2 { @apply text-xl  font-semibold mb-3 mt-5; }
+  body {
+    @apply bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100;
+    transition: background-color 0.2s, color 0.2s;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: theme('colors.slate.600') transparent;
+  }
+  *::-webkit-scrollbar { width: 6px; height: 6px; }
+  *::-webkit-scrollbar-track { background: transparent; }
+  *::-webkit-scrollbar-thumb {
+    @apply bg-slate-300 dark:bg-slate-600 rounded-full;
+  }
+}
+
+/* ── Reusable component classes ────────────────────────────────────────────── */
+@layer components {
+  .card {
+    @apply bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl;
+  }
+
+  .input {
+    @apply w-full bg-slate-50 dark:bg-slate-900
+           border border-slate-300 dark:border-slate-600
+           rounded-lg px-3 py-2 text-sm
+           text-slate-900 dark:text-slate-100
+           placeholder-slate-400 dark:placeholder-slate-500
+           focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent
+           transition;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-2
+           px-4 py-2 rounded-lg text-sm font-medium text-white
+           bg-accent-600 hover:bg-accent-500 active:bg-accent-700
+           disabled:opacity-50 disabled:cursor-not-allowed
+           transition;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center gap-2
+           px-4 py-2 rounded-lg text-sm font-medium
+           bg-slate-100 dark:bg-slate-800
+           text-slate-700 dark:text-slate-300
+           hover:bg-slate-200 dark:hover:bg-slate-700
+           border border-slate-200 dark:border-slate-700
+           disabled:opacity-50 transition;
+  }
+
+  .btn-ghost {
+    @apply inline-flex items-center justify-center gap-2
+           px-3 py-1.5 rounded-lg text-sm
+           text-slate-600 dark:text-slate-400
+           hover:bg-slate-100 dark:hover:bg-slate-800
+           transition;
+  }
+
+  .label {
+    @apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
+  }
+}
+
+/* ── AsciiDoc rendered output ──────────────────────────────────────────────── */
+@layer utilities {
+  .adoc-content { @apply text-slate-800 dark:text-slate-200 leading-relaxed; }
+  .adoc-content h1 { @apply text-2xl font-bold mb-4 mt-6 text-slate-900 dark:text-white; }
+  .adoc-content h2 { @apply text-xl  font-semibold mb-3 mt-5 text-slate-900 dark:text-white; }
   .adoc-content h3 { @apply text-lg  font-medium mb-2 mt-4; }
-  .adoc-content p  { @apply mb-3 leading-relaxed; }
-  .adoc-content pre { @apply bg-surface-800 rounded-lg p-4 overflow-x-auto font-mono text-sm mb-4; }
-  .adoc-content code { @apply font-mono text-sm bg-surface-800 px-1 rounded; }
+  .adoc-content p  { @apply mb-3; }
+  .adoc-content pre {
+    @apply bg-slate-100 dark:bg-slate-800/80
+           border border-slate-200 dark:border-slate-700
+           rounded-lg p-4 overflow-x-auto font-mono text-sm mb-4;
+  }
+  .adoc-content code {
+    @apply font-mono text-sm
+           bg-slate-100 dark:bg-slate-800
+           text-accent-600 dark:text-accent-400
+           px-1.5 py-0.5 rounded;
+  }
   .adoc-content ul { @apply list-disc list-inside mb-3 space-y-1; }
   .adoc-content ol { @apply list-decimal list-inside mb-3 space-y-1; }
-  .adoc-content blockquote { @apply border-l-4 border-slate-500 pl-4 italic text-slate-400 mb-3; }
+  .adoc-content blockquote {
+    @apply border-l-4 border-accent-500 pl-4 italic
+           text-slate-600 dark:text-slate-400 mb-3;
+  }
   .adoc-content table { @apply w-full text-sm border-collapse mb-4; }
-  .adoc-content th { @apply bg-surface-800 px-3 py-2 text-left border border-slate-700; }
-  .adoc-content td { @apply px-3 py-2 border border-slate-700; }
+  .adoc-content th {
+    @apply bg-slate-100 dark:bg-slate-800
+           px-3 py-2 text-left
+           border border-slate-200 dark:border-slate-700 font-medium;
+  }
+  .adoc-content td { @apply px-3 py-2 border border-slate-200 dark:border-slate-700; }
 }

frontend/src/components/layout/AppLayout.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Sidebar from './Sidebar.vue'
+import ThemeToggle from './ThemeToggle.vue'
+import { useAppStore } from '@/stores/app'
 
+const app = useAppStore()
 const sidebarOpen = ref(false)
 </script>
 
 <template>
-  <div class="flex h-screen overflow-hidden bg-surface-900 text-slate-100">
+  <div class="flex h-screen overflow-hidden bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">
+
     <!-- Mobile overlay -->
     <transition name="fade">
       <div
         v-if="sidebarOpen"
-        class="fixed inset-0 z-20 bg-black/60 lg:hidden"
+        class="fixed inset-0 z-20 bg-black/50 backdrop-blur-sm lg:hidden"
         @click="sidebarOpen = false"
       />
     </transition>
 
-    <!-- Sidebar — slide-over on mobile, static on desktop -->
+    <!-- Sidebar -->
     <aside
       :class="[
-        'fixed inset-y-0 left-0 z-30 w-64 flex-shrink-0 bg-surface-800 border-r border-slate-700 transform transition-transform duration-200',
+        'fixed inset-y-0 left-0 z-30 w-64 flex-shrink-0',
+        'bg-slate-50 dark:bg-slate-800/50',
+        'border-r border-slate-200 dark:border-slate-700/60',
+        'backdrop-blur-md',
+        'transform transition-transform duration-250 ease-in-out',
         'lg:static lg:translate-x-0',
         sidebarOpen ? 'translate-x-0' : '-translate-x-full',
       ]"
@@ -27,20 +35,39 @@ const sidebarOpen = ref(false)
       <Sidebar @close="sidebarOpen = false" />
     </aside>
 
-    <!-- Main content -->
+    <!-- Main area -->
     <div class="flex flex-col flex-1 min-w-0 overflow-hidden">
-      <!-- Mobile top bar -->
-      <header class="flex items-center gap-3 p-3 border-b border-slate-700 lg:hidden">
+
+      <!-- Top bar (always visible on mobile, only shows breadcrumb on desktop) -->
+      <header class="flex items-center gap-2 px-4 py-3 border-b border-slate-200 dark:border-slate-700/60 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md">
+        <!-- Hamburger (mobile only) -->
         <button
-          class="p-1.5 rounded hover:bg-surface-700"
+          class="btn-ghost p-2 -ml-2 lg:hidden"
           aria-label="Open navigation"
           @click="sidebarOpen = true"
         >
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
           </svg>
         </button>
-        <span class="font-semibold">Archivum</span>
+
+        <span class="font-semibold text-slate-900 dark:text-white lg:hidden">Archivum</span>
+
+        <div class="flex-1" />
+
+        <!-- Right side controls -->
+        <ThemeToggle />
+
+        <div class="flex items-center gap-1 pl-2 border-l border-slate-200 dark:border-slate-700 ml-1">
+          <span class="text-sm text-slate-500 dark:text-slate-400 hidden sm:block">
+            {{ app.username ?? 'Guest' }}
+          </span>
+          <button
+            v-if="app.token"
+            class="btn-ghost text-xs"
+            @click="app.logout()"
+          >Sign out</button>
+        </div>
       </header>
 
       <main class="flex-1 overflow-auto">

frontend/src/components/layout/Sidebar.vue

@@ -1,18 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { gql } from '@/lib/gql'
+import { useAppStore } from '@/stores/app'
 
 const emit = defineEmits<{ close: [] }>()
 
 interface DocMeta { slug: string; title: string }
 
 const docs = ref<DocMeta[]>([])
+const loading = ref(true)
+const app = useAppStore()
 const router = useRouter()
+const route = useRoute()
 
 onMounted(async () => {
-  const data = await gql<{ documents: DocMeta[] }>(`{ documents { slug title } }`)
-  docs.value = data.documents
+  try {
+    const data = await gql<{ documents?: DocMeta[] }>(`{ documents { slug title } }`)
+    docs.value = data.documents ?? []
+  } catch {
+    docs.value = []
+  } finally {
+    loading.value = false
+  }
 })
 
 function navigate(slug: string) {
@@ -22,38 +32,81 @@ function navigate(slug: string) {
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
-    <!-- Header -->
-    <div class="flex items-center justify-between px-4 py-3 border-b border-slate-700">
-      <router-link to="/" class="font-bold text-lg" @click="emit('close')">Archivum</router-link>
-      <button class="lg:hidden p-1 rounded hover:bg-surface-700" @click="emit('close')">
+  <div class="flex flex-col h-full select-none">
+
+    <!-- Logo / header -->
+    <div class="flex items-center justify-between px-4 py-4 border-b border-slate-200 dark:border-slate-700/60">
+      <router-link
+        to="/"
+        class="flex items-center gap-2 font-bold text-slate-900 dark:text-white text-lg"
+        @click="emit('close')"
+      >
+        <!-- Book icon -->
+        <svg class="w-6 h-6 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+        </svg>
+        Archivum
+      </router-link>
+      <button
+        class="btn-ghost p-1.5 lg:hidden"
+        @click="emit('close')"
+      >
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
         </svg>
       </button>
     </div>
 
+    <!-- Search placeholder -->
+    <div class="px-3 py-3 border-b border-slate-200 dark:border-slate-700/60">
+      <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-400 text-sm cursor-not-allowed">
+        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+        </svg>
+        <span>Search…</span>
+        <kbd class="ml-auto text-xs bg-slate-200 dark:bg-slate-700 rounded px-1.5 py-0.5">⌘K</kbd>
+      </div>
+    </div>
+
     <!-- Document tree -->
-    <nav class="flex-1 overflow-y-auto py-2">
+    <nav class="flex-1 overflow-y-auto py-2 px-2">
+      <div v-if="loading" class="space-y-1 px-2 mt-1">
+        <div v-for="i in 4" :key="i" class="h-7 rounded-md bg-slate-200 dark:bg-slate-700 animate-pulse" :style="{ width: `${60 + i * 8}%` }" />
+      </div>
+
+      <p v-else-if="docs.length === 0" class="text-xs text-slate-400 px-3 py-2">
+        No documents yet.
+      </p>
+
       <button
         v-for="doc in docs"
         :key="doc.slug"
-        class="w-full text-left px-4 py-2 text-sm hover:bg-surface-700 truncate"
+        :class="[
+          'w-full text-left px-3 py-2 rounded-lg text-sm truncate transition',
+          route.params.slug === doc.slug
+            ? 'bg-accent-500/10 text-accent-600 dark:text-accent-400 font-medium'
+            : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/60'
+        ]"
         @click="navigate(doc.slug)"
       >
-        {{ doc.title }}
+        {{ doc.title || doc.slug }}
       </button>
     </nav>
 
-    <!-- New document button -->
-    <div class="p-3 border-t border-slate-700">
+    <!-- New document -->
+    <div class="p-3 border-t border-slate-200 dark:border-slate-700/60">
       <router-link
         to="/doc/new"
-        class="block w-full text-center py-2 rounded bg-blue-700 hover:bg-blue-600 text-sm font-medium"
+        class="btn-primary w-full text-center text-sm py-2"
         @click="emit('close')"
       >
-        + New document
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+        </svg>
+        New document
       </router-link>
     </div>
+
   </div>
 </template>

frontend/src/components/layout/ThemeToggle.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useThemeStore, ACCENT_PRESETS } from '@/stores/theme'
+
+const theme = useThemeStore()
+const open = ref(false)
+const customHex = ref(theme.customAccent || '#6366f1')
+
+function toggleMode() {
+  theme.setMode(theme.mode === 'dark' ? 'light' : 'dark')
+}
+
+const accentColors: Record<string, string> = {
+  blue: '#3b82f6', violet: '#8b5cf6', rose: '#f43f5e',
+  emerald: '#10b981', amber: '#f59e0b', cyan: '#06b6d4',
+}
+</script>
+
+<template>
+  <div class="relative">
+    <!-- Trigger button -->
+    <button
+      class="btn-ghost p-2 rounded-lg"
+      :title="open ? 'Close theme panel' : 'Appearance'"
+      @click="open = !open"
+    >
+      <!-- Sun icon (light) / Moon icon (dark) -->
+      <svg v-if="theme.mode === 'dark'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+      </svg>
+      <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+      </svg>
+    </button>
+
+    <!-- Panel -->
+    <transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 scale-95 translate-y-1"
+      enter-to-class="opacity-100 scale-100 translate-y-0"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 scale-100 translate-y-0"
+      leave-to-class="opacity-0 scale-95 translate-y-1"
+    >
+      <div
+        v-if="open"
+        class="absolute right-0 top-full mt-2 w-72 card shadow-xl p-4 z-50 origin-top-right"
+      >
+        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">Appearance</p>
+
+        <!-- Mode toggle -->
+        <div class="flex rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700 mb-4">
+          <button
+            :class="['flex-1 py-2 text-sm flex items-center justify-center gap-2 transition',
+              theme.mode === 'light'
+                ? 'bg-accent-600 text-white'
+                : 'hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-400']"
+            @click="theme.setMode('light')"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+            </svg>
+            Light
+          </button>
+          <button
+            :class="['flex-1 py-2 text-sm flex items-center justify-center gap-2 transition',
+              theme.mode === 'dark'
+                ? 'bg-accent-600 text-white'
+                : 'hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-400']"
+            @click="theme.setMode('dark')"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+            </svg>
+            Dark
+          </button>
+        </div>
+
+        <!-- Accent presets -->
+        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">Accent color</p>
+        <div class="flex flex-wrap gap-2 mb-3">
+          <button
+            v-for="preset in ACCENT_PRESETS"
+            :key="preset.name"
+            :title="preset.label"
+            :style="{ backgroundColor: accentColors[preset.name] }"
+            :class="['w-7 h-7 rounded-full transition ring-2 ring-offset-2 ring-offset-white dark:ring-offset-slate-800',
+              theme.accentName === preset.name ? 'ring-slate-400 dark:ring-slate-500 scale-110' : 'ring-transparent hover:scale-110']"
+            @click="theme.setAccent(preset.name)"
+          />
+        </div>
+
+        <!-- Custom color -->
+        <div class="flex items-center gap-2">
+          <input
+            v-model="customHex"
+            type="color"
+            class="w-8 h-8 rounded cursor-pointer border-0 bg-transparent p-0"
+          />
+          <input
+            v-model="customHex"
+            type="text"
+            maxlength="7"
+            placeholder="#6366f1"
+            class="input flex-1 font-mono text-xs"
+          />
+          <button
+            class="btn-secondary text-xs px-3 py-2"
+            @click="theme.setAccent('custom', customHex)"
+          >Apply</button>
+        </div>
+      </div>
+    </transition>
+
+    <!-- Backdrop -->
+    <div v-if="open" class="fixed inset-0 z-40" @click="open = false" />
+  </div>
+</template>

frontend/src/components/wizard/SetupWizard.vue

@@ -1,21 +1,35 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { gql } from '@/lib/gql'
 import { useAppStore } from '@/stores/app'
+import { useThemeStore } from '@/stores/theme'
+import ThemeToggle from '@/components/layout/ThemeToggle.vue'
 
 const router = useRouter()
 const app = useAppStore()
+const theme = useThemeStore()
 
 const step = ref(1)
+const totalSteps = 3
 const error = ref('')
 const submitting = ref(false)
 
+// LDAP test state
+const ldapTesting = ref(false)
+const ldapTestResult = ref<{ ok: boolean; message: string } | null>(null)
+
+// Admin password confirmation
+const adminPassConfirm = ref('')
+const passwordMismatch = computed(
+  () => adminPassConfirm.value.length > 0 && adminPassConfirm.value !== form.adminPass
+)
+
 const form = reactive({
   storagePath: '/data/wiki',
-  adminUser:   'admin',
-  adminPass:   '',
-  jwtSecret:   crypto.randomUUID().replace(/-/g, ''),
+  adminUser: 'admin',
+  adminPass: '',
+  jwtSecret: crypto.randomUUID().replace(/-/g, ''),
   ldapEnabled: false,
   ldap: {
     host: '',
@@ -26,6 +40,38 @@ const form = reactive({
   },
 })
 
+const stepValid = computed(() => {
+  if (step.value === 1) {
+    return form.storagePath.trim() !== ''
+      && form.adminUser.trim() !== ''
+      && form.adminPass.length >= 8
+      && !passwordMismatch.value
+  }
+  return true
+})
+
+async function testLdap() {
+  ldapTesting.value = true
+  ldapTestResult.value = null
+  try {
+    const data = await gql<{ testLdapConnection: { success: boolean; message: string } }>(
+      `mutation TestLdap($i: LDAPInput!) { testLdapConnection(input: $i) { success message } }`,
+      { i: form.ldap },
+    )
+    ldapTestResult.value = {
+      ok: data.testLdapConnection.success,
+      message: data.testLdapConnection.message,
+    }
+  } catch (e: unknown) {
+    ldapTestResult.value = {
+      ok: false,
+      message: e instanceof Error ? e.message : 'Connection failed',
+    }
+  } finally {
+    ldapTesting.value = false
+  }
+}
+
 async function submit() {
   error.value = ''
   submitting.value = true
@@ -35,10 +81,10 @@ async function submit() {
       {
         i: {
           storagePath: form.storagePath,
-          adminUser:   form.adminUser,
-          adminPass:   form.adminPass,
-          jwtSecret:   form.jwtSecret,
-          ldap:        form.ldapEnabled ? form.ldap : null,
+          adminUser: form.adminUser,
+          adminPass: form.adminPass,
+          jwtSecret: form.jwtSecret,
+          ldap: form.ldapEnabled ? form.ldap : null,
         },
       },
     )
@@ -46,7 +92,8 @@ async function submit() {
     await app.login(form.adminUser, form.adminPass)
     router.replace('/')
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : String(e)
+    error.value = e instanceof Error ? e.message : 'Setup failed'
+    step.value = 1
   } finally {
     submitting.value = false
   }
@@ -54,81 +101,238 @@ async function submit() {
 </script>
 
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-surface-900 px-4">
-    <div class="w-full max-w-md bg-surface-800 rounded-2xl p-8 shadow-xl">
-      <h1 class="text-2xl font-bold mb-1">Welcome to Archivum</h1>
-      <p class="text-slate-400 text-sm mb-6">Complete setup to get started.</p>
+  <div class="min-h-screen bg-slate-50 dark:bg-slate-900 flex flex-col">
 
-      <!-- Step 1: Storage & Admin -->
-      <form v-if="step === 1" class="space-y-4" @submit.prevent="step = 2">
-        <div>
-          <label class="block text-sm mb-1">Storage path</label>
-          <input v-model="form.storagePath" required class="input" />
-        </div>
-        <div>
-          <label class="block text-sm mb-1">Admin username</label>
-          <input v-model="form.adminUser" required class="input" />
-        </div>
-        <div>
-          <label class="block text-sm mb-1">Admin password</label>
-          <input v-model="form.adminPass" type="password" required class="input" />
-        </div>
-        <button type="submit" class="btn-primary w-full">Next →</button>
-      </form>
+    <!-- Top bar with theme toggle -->
+    <div class="flex items-center justify-between px-6 py-4">
+      <div class="flex items-center gap-2 text-slate-900 dark:text-white font-bold">
+        <svg class="w-6 h-6 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+        </svg>
+        Archivum
+      </div>
+      <ThemeToggle />
+    </div>
 
-      <!-- Step 2: LDAP (optional) -->
-      <form v-else-if="step === 2" class="space-y-4" @submit.prevent="submit">
-        <label class="flex items-center gap-2 cursor-pointer">
-          <input v-model="form.ldapEnabled" type="checkbox" class="rounded" />
-          <span class="text-sm">Enable LDAP authentication</span>
-        </label>
+    <!-- Wizard card -->
+    <div class="flex-1 flex items-center justify-center px-4 py-8">
+      <div class="w-full max-w-lg">
 
-        <template v-if="form.ldapEnabled">
-          <div class="grid grid-cols-2 gap-3">
-            <div>
-              <label class="block text-sm mb-1">Host</label>
-              <input v-model="form.ldap.host" required class="input" />
+        <!-- Progress -->
+        <div class="flex items-center gap-2 mb-8">
+          <div
+            v-for="i in totalSteps"
+            :key="i"
+            :class="[
+              'h-1.5 flex-1 rounded-full transition-all duration-300',
+              i <= step ? 'bg-accent-500' : 'bg-slate-200 dark:bg-slate-700'
+            ]"
+          />
+        </div>
+
+        <div class="card p-8 shadow-xl shadow-slate-200/50 dark:shadow-black/30">
+
+          <!-- ── Step 1: Admin & Storage ─────────────────────────────────────── -->
+          <template v-if="step === 1">
+            <h1 class="text-2xl font-bold text-slate-900 dark:text-white mb-1">Welcome to Archivum</h1>
+            <p class="text-slate-500 dark:text-slate-400 text-sm mb-6">Create your admin account and set the storage location.</p>
+
+            <div class="space-y-4">
+              <div>
+                <label class="label">Storage path
+                  <span class="text-xs font-normal text-slate-400 ml-1">(where .adoc files are stored)</span>
+                </label>
+                <input v-model="form.storagePath" class="input" placeholder="/data/wiki" />
+              </div>
+
+              <div>
+                <label class="label">Admin username</label>
+                <input v-model="form.adminUser" class="input" placeholder="admin" autocomplete="username" />
+              </div>
+
+              <div>
+                <label class="label">Password
+                  <span class="text-xs font-normal text-slate-400 ml-1">(min 8 characters)</span>
+                </label>
+                <input v-model="form.adminPass" type="password" class="input" placeholder="••••••••" autocomplete="new-password" />
+              </div>
+
+              <div>
+                <label class="label">Confirm password</label>
+                <input
+                  v-model="adminPassConfirm"
+                  type="password"
+                  :class="['input', passwordMismatch ? 'border-rose-500 focus:ring-rose-500' : '']"
+                  placeholder="••••••••"
+                  autocomplete="new-password"
+                />
+                <p v-if="passwordMismatch" class="mt-1 text-xs text-rose-500">Passwords do not match.</p>
+              </div>
             </div>
-            <div>
-              <label class="block text-sm mb-1">Port</label>
-              <input v-model.number="form.ldap.port" type="number" required class="input" />
-            </div>
-          </div>
-          <div>
-            <label class="block text-sm mb-1">Base DN</label>
-            <input v-model="form.ldap.baseDN" required class="input" />
-          </div>
-          <div>
-            <label class="block text-sm mb-1">Bind DN</label>
-            <input v-model="form.ldap.bindDN" required class="input" />
-          </div>
-          <div>
-            <label class="block text-sm mb-1">Bind password</label>
-            <input v-model="form.ldap.bindPassword" type="password" required class="input" />
-          </div>
-        </template>
+          </template>
 
-        <p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
+          <!-- ── Step 2: LDAP ───────────────────────────────────────────────── -->
+          <template v-else-if="step === 2">
+            <h2 class="text-xl font-bold text-slate-900 dark:text-white mb-1">LDAP Authentication</h2>
+            <p class="text-slate-500 dark:text-slate-400 text-sm mb-6">Optional — leave disabled to use local accounts only.</p>
+
+            <label class="flex items-center gap-3 cursor-pointer mb-5 select-none">
+              <div
+                :class="[
+                  'w-10 h-6 rounded-full transition-colors relative',
+                  form.ldapEnabled ? 'bg-accent-600' : 'bg-slate-300 dark:bg-slate-600'
+                ]"
+                @click="form.ldapEnabled = !form.ldapEnabled"
+              >
+                <div :class="['absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform', form.ldapEnabled ? 'translate-x-5' : 'translate-x-1']" />
+              </div>
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-300">Enable LDAP</span>
+            </label>
+
+            <transition
+              enter-active-class="transition duration-200 ease-out"
+              enter-from-class="opacity-0 -translate-y-2"
+              enter-to-class="opacity-100 translate-y-0"
+            >
+              <div v-if="form.ldapEnabled" class="space-y-4">
+                <div class="grid grid-cols-3 gap-3">
+                  <div class="col-span-2">
+                    <label class="label">Host</label>
+                    <input v-model="form.ldap.host" class="input" placeholder="ldap.example.com" />
+                  </div>
+                  <div>
+                    <label class="label">Port</label>
+                    <input v-model.number="form.ldap.port" type="number" class="input" placeholder="389" />
+                  </div>
+                </div>
+                <div>
+                  <label class="label">Base DN</label>
+                  <input v-model="form.ldap.baseDN" class="input" placeholder="dc=example,dc=com" />
+                </div>
+                <div>
+                  <label class="label">Bind DN</label>
+                  <input v-model="form.ldap.bindDN" class="input" placeholder="cn=reader,dc=example,dc=com" />
+                </div>
+                <div>
+                  <label class="label">Bind password</label>
+                  <input v-model="form.ldap.bindPassword" type="password" class="input" />
+                </div>
+
+                <!-- Test connection -->
+                <div class="pt-1">
+                  <button
+                    type="button"
+                    class="btn-secondary text-sm"
+                    :disabled="ldapTesting || !form.ldap.host"
+                    @click="testLdap"
+                  >
+                    <svg v-if="ldapTesting" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
+                    </svg>
+                    <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                    </svg>
+                    {{ ldapTesting ? 'Testing…' : 'Test connection' }}
+                  </button>
+
+                  <transition name="fade-y">
+                    <div
+                      v-if="ldapTestResult"
+                      :class="[
+                        'mt-3 flex items-start gap-2 rounded-lg px-3 py-2.5 text-sm',
+                        ldapTestResult.ok
+                          ? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800'
+                          : 'bg-rose-50 dark:bg-rose-900/20 text-rose-700 dark:text-rose-400 border border-rose-200 dark:border-rose-800'
+                      ]"
+                    >
+                      <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path v-if="ldapTestResult.ok" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                        <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                      </svg>
+                      {{ ldapTestResult.message }}
+                    </div>
+                  </transition>
+                </div>
+              </div>
+            </transition>
+          </template>
+
+          <!-- ── Step 3: Review ─────────────────────────────────────────────── -->
+          <template v-else>
+            <h2 class="text-xl font-bold text-slate-900 dark:text-white mb-1">Review & Finish</h2>
+            <p class="text-slate-500 dark:text-slate-400 text-sm mb-6">Check your settings before completing setup.</p>
+
+            <dl class="space-y-3 text-sm">
+              <div class="flex justify-between py-2 border-b border-slate-100 dark:border-slate-700">
+                <dt class="text-slate-500 dark:text-slate-400">Storage path</dt>
+                <dd class="font-mono text-slate-800 dark:text-slate-200">{{ form.storagePath }}</dd>
+              </div>
+              <div class="flex justify-between py-2 border-b border-slate-100 dark:border-slate-700">
+                <dt class="text-slate-500 dark:text-slate-400">Admin user</dt>
+                <dd class="text-slate-800 dark:text-slate-200">{{ form.adminUser }}</dd>
+              </div>
+              <div class="flex justify-between py-2 border-b border-slate-100 dark:border-slate-700">
+                <dt class="text-slate-500 dark:text-slate-400">LDAP</dt>
+                <dd :class="form.ldapEnabled ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-400'">
+                  {{ form.ldapEnabled ? `Enabled (${form.ldap.host}:${form.ldap.port})` : 'Disabled' }}
+                </dd>
+              </div>
+            </dl>
+
+            <p v-if="error" class="mt-4 flex items-center gap-2 text-sm text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 rounded-lg px-3 py-2.5">
+              <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+              </svg>
+              {{ error }}
+            </p>
+          </template>
+
+          <!-- Navigation buttons -->
+          <div class="flex items-center gap-3 mt-8">
+            <button
+              v-if="step > 1"
+              class="btn-secondary"
+              :disabled="submitting"
+              @click="step--"
+            >← Back</button>
+
+            <div class="flex-1" />
+
+            <button
+              v-if="step < totalSteps"
+              class="btn-primary"
+              :disabled="!stepValid"
+              @click="step++"
+            >
+              Continue →
+            </button>
+            <button
+              v-else
+              class="btn-primary min-w-32"
+              :disabled="submitting"
+              @click="submit"
+            >
+              <svg v-if="submitting" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
+              </svg>
+              {{ submitting ? 'Setting up…' : 'Finish setup' }}
+            </button>
+          </div>
 
-        <div class="flex gap-3">
-          <button type="button" class="btn-secondary flex-1" @click="step = 1">← Back</button>
-          <button type="submit" class="btn-primary flex-1" :disabled="submitting">
-            {{ submitting ? 'Setting up…' : 'Finish setup' }}
-          </button>
         </div>
-      </form>
+
+        <p class="text-center text-xs text-slate-400 mt-4">
+          Step {{ step }} of {{ totalSteps }}
+        </p>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.input {
-  @apply w-full bg-surface-900 border border-slate-600 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500;
-}
-.btn-primary {
-  @apply py-2 rounded-lg bg-blue-600 hover:bg-blue-500 font-medium text-sm disabled:opacity-50 transition;
-}
-.btn-secondary {
-  @apply py-2 rounded-lg bg-surface-900 hover:bg-surface-700 font-medium text-sm transition;
-}
+.fade-y-enter-active, .fade-y-leave-active { transition: opacity 0.2s, transform 0.2s; }
+.fade-y-enter-from, .fade-y-leave-to { opacity: 0; transform: translateY(-4px); }
 </style>

frontend/src/stores/theme.ts

@@ -0,0 +1,87 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+export type ThemeMode = 'dark' | 'light'
+
+export interface AccentPreset {
+  name: string
+  label: string
+  shades: { 400: string; 500: string; 600: string; 700: string }
+}
+
+export const ACCENT_PRESETS: AccentPreset[] = [
+  { name: 'blue',   label: 'Blue',   shades: { 400: '96 165 250',  500: '59 130 246',  600: '37 99 235',   700: '29 78 216'   } },
+  { name: 'violet', label: 'Violet', shades: { 400: '167 139 250', 500: '139 92 246',  600: '124 58 237',  700: '109 40 217'  } },
+  { name: 'rose',   label: 'Rose',   shades: { 400: '251 113 133', 500: '244 63 94',   600: '225 29 72',   700: '190 18 60'   } },
+  { name: 'emerald',label: 'Green',  shades: { 400: '52 211 153',  500: '16 185 129',  600: '5 150 105',   700: '4 120 87'    } },
+  { name: 'amber',  label: 'Amber',  shades: { 400: '251 191 36',  500: '245 158 11',  600: '217 119 6',   700: '180 83 9'    } },
+  { name: 'cyan',   label: 'Cyan',   shades: { 400: '34 211 238',  500: '6 182 212',   600: '8 145 178',   700: '14 116 144'  } },
+]
+
+function hexToRgbTriple(hex: string): string {
+  const h = hex.replace('#', '')
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  return `${r} ${g} ${b}`
+}
+
+function darken(rgb: string, amount: number): string {
+  return rgb.split(' ').map(c => Math.max(0, Math.round(Number(c) * (1 - amount))).toString()).join(' ')
+}
+
+function lighten(rgb: string, amount: number): string {
+  return rgb.split(' ').map(c => Math.min(255, Math.round(Number(c) + (255 - Number(c)) * amount)).toString()).join(' ')
+}
+
+export const useThemeStore = defineStore('theme', () => {
+  const mode = ref<ThemeMode>((localStorage.getItem('theme-mode') as ThemeMode) ?? 'dark')
+  const accentName = ref<string>(localStorage.getItem('theme-accent') ?? 'blue')
+  const customAccent = ref<string>(localStorage.getItem('theme-custom-accent') ?? '')
+
+  function applyMode(m: ThemeMode) {
+    document.documentElement.classList.toggle('dark', m === 'dark')
+    document.documentElement.classList.toggle('light', m === 'light')
+  }
+
+  function applyAccent(name: string, custom = '') {
+    let shades: AccentPreset['shades']
+    if (name === 'custom' && custom.match(/^#[0-9a-fA-F]{6}$/)) {
+      const base = hexToRgbTriple(custom)
+      shades = {
+        400: lighten(base, 0.15),
+        500: base,
+        600: darken(base, 0.1),
+        700: darken(base, 0.25),
+      }
+    } else {
+      shades = (ACCENT_PRESETS.find(p => p.name === name) ?? ACCENT_PRESETS[0]).shades
+    }
+    const root = document.documentElement
+    root.style.setProperty('--accent-400', shades[400])
+    root.style.setProperty('--accent-500', shades[500])
+    root.style.setProperty('--accent-600', shades[600])
+    root.style.setProperty('--accent-700', shades[700])
+  }
+
+  function setMode(m: ThemeMode) {
+    mode.value = m
+    localStorage.setItem('theme-mode', m)
+    applyMode(m)
+  }
+
+  function setAccent(name: string, custom = '') {
+    accentName.value = name
+    customAccent.value = custom
+    localStorage.setItem('theme-accent', name)
+    localStorage.setItem('theme-custom-accent', custom)
+    applyAccent(name, custom)
+  }
+
+  function init() {
+    applyMode(mode.value)
+    applyAccent(accentName.value, customAccent.value)
+  }
+
+  return { mode, accentName, customAccent, setMode, setAccent, init }
+})