+
-
-
-
-
-
+
+
+
+
+
+
+
+ Welcome to Archivum
+ Create your admin account and set the storage location.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Passwords do not match.
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
{{ error }}
+
+
+ LDAP Authentication
+ Optional — leave disabled to use local accounts only.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ ldapTestResult.message }}
+
+
+
+
+
+
+ Review & Finish
+ Check your settings before completing setup.
+
+
+
+
- Storage path
+ - {{ form.storagePath }}
+
+
+
- Admin user
+ - {{ form.adminUser }}
+
+
+
- LDAP
+ -
+ {{ form.ldapEnabled ? `Enabled (${form.ldap.host}:${form.ldap.port})` : 'Disabled' }}
+
+
+
+
+
+
+ {{ error }}
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+ Step {{ step }} of {{ totalSteps }}
+
+
diff --git a/frontend/src/stores/theme.ts b/frontend/src/stores/theme.ts
new file mode 100644
index 0000000..14c0f6f
--- /dev/null
+++ b/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
((localStorage.getItem('theme-mode') as ThemeMode) ?? 'dark')
+ const accentName = ref(localStorage.getItem('theme-accent') ?? 'blue')
+ const customAccent = ref(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 }
+})
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index e35b5a9..151967e 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -9,12 +9,12 @@ export default {
mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
},
colors: {
- surface: {
- 50: '#f8fafc',
- 100: '#f1f5f9',
- 800: '#1e293b',
- 900: '#0f172a',
- 950: '#020617',
+ // Accent color driven by CSS variables set by the theme store.
+ accent: {
+ 400: 'rgb(var(--accent-400) / )',
+ 500: 'rgb(var(--accent-500) / )',
+ 600: 'rgb(var(--accent-600) / )',
+ 700: 'rgb(var(--accent-700) / )',
},
},
},
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 52c085b..5c7fc0a 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -8,19 +8,15 @@ export default defineConfig({
vue(),
VitePWA({
registerType: 'autoUpdate',
- includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
manifest: {
name: 'Archivum',
short_name: 'Archivum',
description: 'AsciiDoc wiki with Git history',
- theme_color: '#1e293b',
+ theme_color: '#0f172a',
background_color: '#0f172a',
display: 'standalone',
- icons: [
- { src: 'icons/icon-192.png', sizes: '192x192', type: 'image/png' },
- { src: 'icons/icon-512.png', sizes: '512x512', type: 'image/png' },
- { src: 'icons/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
- ],
+ // Icons are optional; add real PNG files to public/icons/ to enable PWA install.
+ icons: [],
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],