+
+
Set the default appearance for visitors. Users can toggle dark/light mode via the header icon.
+
+
+ Default Mode
+
+
+
+ Dark Theme
+
+
+
+ Light Theme
+
+
+
+
When "Auto" is selected, files are converted to these formats instead of the native container.
@@ -922,6 +970,25 @@ h3 {
margin-top: var(--space-sm);
}
+.theme-settings {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+ margin-top: var(--space-sm);
+}
+
+.theme-setting-row {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.theme-setting-label {
+ min-width: 100px;
+ font-weight: 500;
+ color: var(--color-text);
+}
+
.format-default-row {
display: flex;
align-items: center;
diff --git a/frontend/src/components/DarkModeToggle.vue b/frontend/src/components/DarkModeToggle.vue
index 81122d4..aaae9c9 100644
--- a/frontend/src/components/DarkModeToggle.vue
+++ b/frontend/src/components/DarkModeToggle.vue
@@ -1,88 +1,37 @@
-
-
-
-
-
-
-
Dark
-
-
-
-
-
Light
-
-
-
-
diff --git a/frontend/src/stores/theme.ts b/frontend/src/stores/theme.ts
index be5d454..887f3ef 100644
--- a/frontend/src/stores/theme.ts
+++ b/frontend/src/stores/theme.ts
@@ -1,15 +1,17 @@
/**
* Theme Pinia store — manages theme selection and application.
*
- * Built-in themes: cyberpunk (default), dark, light
- * Custom themes: loaded via /api/themes manifest at runtime
+ * Admin sets: which dark theme, which light theme, and default mode (dark/light).
+ * Visitors: see the admin default, can toggle dark/light via header icon.
+ * Visitor preference stored in cookie (session-scoped persistence).
*
- * Persistence: localStorage key 'mrip-theme'
- * Application: sets data-theme attribute on element
+ * Built-in themes: 5 dark + 4 light = 9 total.
+ * Custom themes: loaded via /api/themes manifest at runtime.
*/
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
+import { useConfigStore } from './config'
export interface ThemeMeta {
id: string
@@ -20,8 +22,7 @@ export interface ThemeMeta {
variant: 'dark' | 'light'
}
-const STORAGE_KEY = 'mrip-theme'
-const DEFAULT_THEME = 'cyberpunk'
+const COOKIE_KEY = 'mrip-mode'
const BUILTIN_THEMES: ThemeMeta[] = [
// Dark themes
@@ -38,76 +39,90 @@ const BUILTIN_THEMES: ThemeMeta[] = [
]
export const useThemeStore = defineStore('theme', () => {
- const currentTheme = ref(DEFAULT_THEME)
+ const currentTheme = ref('cyberpunk')
+ const currentMode = ref<'dark' | 'light'>('dark')
const customThemes = ref
([])
const customThemeCSS = ref>(new Map())
- /** Whether the current theme is a dark variant. */
- const isDark = computed(() => {
- const meta = allThemes.value.find(t => t.id === currentTheme.value)
- return meta ? meta.variant === 'dark' : true
- })
+ // Admin-configured theme pair (loaded from public config)
+ const adminDarkTheme = ref('cyberpunk')
+ const adminLightTheme = ref('light')
+ const adminDefaultMode = ref<'dark' | 'light'>('dark')
- const darkThemes = computed(() => allThemes.value.filter(t => t.variant === 'dark'))
- const lightThemes = computed(() => allThemes.value.filter(t => t.variant === 'light'))
+ const isDark = computed(() => currentMode.value === 'dark')
const allThemes = computed(() => [
...BUILTIN_THEMES,
...customThemes.value,
])
+ const darkThemes = computed(() => allThemes.value.filter(t => t.variant === 'dark'))
+ const lightThemes = computed(() => allThemes.value.filter(t => t.variant === 'light'))
+
const currentMeta = computed(() =>
allThemes.value.find(t => t.id === currentTheme.value)
)
/**
- * Initialize the theme store — reads from localStorage and applies.
+ * Initialize — reads admin config, then checks for visitor cookie override.
*/
function init(): void {
- const saved = localStorage.getItem(STORAGE_KEY)
- if (saved && BUILTIN_THEMES.some(t => t.id === saved)) {
- currentTheme.value = saved
- } else {
- currentTheme.value = DEFAULT_THEME
+ const configStore = useConfigStore()
+ const cfg = configStore.config
+
+ if (cfg) {
+ adminDarkTheme.value = cfg.theme_dark || 'cyberpunk'
+ adminLightTheme.value = cfg.theme_light || 'light'
+ adminDefaultMode.value = (cfg.theme_default_mode as 'dark' | 'light') || 'dark'
}
+
+ // Check visitor cookie for mode override
+ const savedMode = _getCookie(COOKIE_KEY) as 'dark' | 'light' | null
+ currentMode.value = savedMode || adminDefaultMode.value
+
+ // Apply the right theme for the current mode
+ const themeId = currentMode.value === 'dark' ? adminDarkTheme.value : adminLightTheme.value
+ currentTheme.value = themeId
+ _apply(themeId)
+ }
+
+ /**
+ * Toggle between dark and light mode. Saves preference to cookie.
+ */
+ function toggleDarkMode(): void {
+ if (isDark.value) {
+ currentMode.value = 'light'
+ currentTheme.value = adminLightTheme.value
+ } else {
+ currentMode.value = 'dark'
+ currentTheme.value = adminDarkTheme.value
+ }
+ _setCookie(COOKIE_KEY, currentMode.value, 365)
_apply(currentTheme.value)
}
/**
- * Toggle between the current theme's dark and light variant.
- * Cyberpunk (default) ↔ Light. Dark ↔ Light.
- */
- function toggleDarkMode(): void {
- if (isDark.value) {
- // Switch to last used light theme, or first available
- const lastLight = localStorage.getItem(STORAGE_KEY + '-light') || 'light'
- setTheme(lastLight)
- } else {
- // Return to the last dark theme, defaulting to cyberpunk
- const lastDark = localStorage.getItem(STORAGE_KEY + '-dark') || DEFAULT_THEME
- setTheme(lastDark)
- }
- }
-
- /**
- * Switch to a theme by ID. Saves to localStorage and applies immediately.
+ * Set a specific theme by ID — used by admin preview.
*/
function setTheme(themeId: string): void {
const found = allThemes.value.find(t => t.id === themeId)
if (!found) return
currentTheme.value = themeId
- localStorage.setItem(STORAGE_KEY, themeId)
- // Remember the last dark theme for toggle
- const meta = allThemes.value.find(t => t.id === themeId)
- if (meta?.variant === 'dark') {
- localStorage.setItem(STORAGE_KEY + '-dark', themeId)
- } else {
- localStorage.setItem(STORAGE_KEY + '-light', themeId)
- }
+ currentMode.value = found.variant
+ _setCookie(COOKIE_KEY, currentMode.value, 365)
_apply(themeId)
}
+ /**
+ * Update admin theme config (called after saving settings).
+ */
+ function updateAdminConfig(darkTheme: string, lightTheme: string, defaultMode: 'dark' | 'light'): void {
+ adminDarkTheme.value = darkTheme
+ adminLightTheme.value = lightTheme
+ adminDefaultMode.value = defaultMode
+ }
+
/**
* Load custom themes from backend manifest.
*/
@@ -124,22 +139,16 @@ export const useThemeStore = defineStore('theme', () => {
author: t.author,
description: t.description,
builtin: false,
- variant: t.variant || 'dark', // default custom themes to dark
+ variant: t.variant || 'dark',
}))
- // If saved theme is a custom theme, validate it still exists
- const saved = localStorage.getItem(STORAGE_KEY)
- if (saved && !allThemes.value.some(t => t.id === saved)) {
- setTheme(DEFAULT_THEME)
- }
-
// Apply custom theme CSS if current is custom
if (!BUILTIN_THEMES.some(t => t.id === currentTheme.value)) {
await _loadCustomCSS(currentTheme.value)
}
}
} catch {
- // Custom themes unavailable — use built-ins only
+ // Custom themes unavailable
}
}
@@ -148,17 +157,13 @@ export const useThemeStore = defineStore('theme', () => {
_injectCustomCSS(themeId, customThemeCSS.value.get(themeId)!)
return
}
-
try {
const res = await fetch(`/api/themes/${themeId}/theme.css`)
if (!res.ok) return
-
const css = await res.text()
customThemeCSS.value.set(themeId, css)
_injectCustomCSS(themeId, css)
- } catch {
- // Failed to load custom CSS
- }
+ } catch { /* */ }
}
function _injectCustomCSS(themeId: string, css: string): void {
@@ -176,17 +181,32 @@ export const useThemeStore = defineStore('theme', () => {
document.documentElement.setAttribute('data-theme', themeId)
}
+ function _getCookie(name: string): string | null {
+ const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`))
+ return match ? decodeURIComponent(match[1]) : null
+ }
+
+ function _setCookie(name: string, value: string, days: number): void {
+ const expires = new Date(Date.now() + days * 86400000).toUTCString()
+ document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/; SameSite=Lax`
+ }
+
return {
currentTheme,
+ currentMode,
customThemes,
allThemes,
darkThemes,
lightThemes,
currentMeta,
isDark,
+ adminDarkTheme,
+ adminLightTheme,
+ adminDefaultMode,
init,
setTheme,
toggleDarkMode,
+ updateAdminConfig,
loadCustomThemes,
}
})
diff --git a/frontend/src/tests/stores/config.test.ts b/frontend/src/tests/stores/config.test.ts
index e69bd3b..e6b6b0c 100644
--- a/frontend/src/tests/stores/config.test.ts
+++ b/frontend/src/tests/stores/config.test.ts
@@ -28,6 +28,9 @@ describe('config store', () => {
const mockConfig = {
session_mode: 'isolated',
default_theme: 'dark',
+ theme_dark: 'cyberpunk',
+ theme_light: 'light',
+ theme_default_mode: 'dark',
welcome_message: 'Test welcome',
purge_enabled: false,
max_concurrent_downloads: 3,
diff --git a/frontend/src/tests/stores/theme.test.ts b/frontend/src/tests/stores/theme.test.ts
index 5f7e5eb..039cb0a 100644
--- a/frontend/src/tests/stores/theme.test.ts
+++ b/frontend/src/tests/stores/theme.test.ts
@@ -1,21 +1,9 @@
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { useThemeStore } from '@/stores/theme'
+import { useConfigStore } from '@/stores/config'
-// Mock localStorage
-const localStorageMock = (() => {
- let store: Record = {}
- return {
- getItem: vi.fn((key: string) => store[key] || null),
- setItem: vi.fn((key: string, value: string) => { store[key] = value }),
- removeItem: vi.fn((key: string) => { delete store[key] }),
- clear: vi.fn(() => { store = {} }),
- }
-})()
-
-Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock })
-
-// Mock document.documentElement.setAttribute
+// Mock document
const setAttributeMock = vi.fn()
Object.defineProperty(globalThis, 'document', {
value: {
@@ -25,44 +13,47 @@ Object.defineProperty(globalThis, 'document', {
getElementById: vi.fn(() => null),
createElement: vi.fn(() => ({ id: '', textContent: '' })),
head: { appendChild: vi.fn() },
+ cookie: '',
},
})
describe('theme store', () => {
beforeEach(() => {
setActivePinia(createPinia())
- localStorageMock.clear()
setAttributeMock.mockClear()
+ document.cookie = ''
})
- it('initializes with cyberpunk as default', () => {
+ it('initializes with cyberpunk as default (dark mode)', () => {
const store = useThemeStore()
store.init()
expect(store.currentTheme).toBe('cyberpunk')
+ expect(store.currentMode).toBe('dark')
+ expect(store.isDark).toBe(true)
expect(setAttributeMock).toHaveBeenCalledWith('data-theme', 'cyberpunk')
})
- it('restores saved theme from localStorage', () => {
- localStorageMock.setItem('mrip-theme', 'dark')
+ it('uses admin config for defaults when available', () => {
+ const configStore = useConfigStore()
+ configStore.config = {
+ theme_dark: 'neon',
+ theme_light: 'paper',
+ theme_default_mode: 'light',
+ } as any
+
const store = useThemeStore()
store.init()
- expect(store.currentTheme).toBe('dark')
- expect(setAttributeMock).toHaveBeenCalledWith('data-theme', 'dark')
+ expect(store.currentTheme).toBe('paper')
+ expect(store.currentMode).toBe('light')
+ expect(store.isDark).toBe(false)
})
- it('falls back to cyberpunk for invalid saved theme', () => {
- localStorageMock.setItem('mrip-theme', 'nonexistent')
- const store = useThemeStore()
- store.init()
- expect(store.currentTheme).toBe('cyberpunk')
- })
-
- it('setTheme updates state, localStorage, and DOM', () => {
+ it('setTheme updates state and applies to DOM', () => {
const store = useThemeStore()
store.init()
store.setTheme('light')
expect(store.currentTheme).toBe('light')
- expect(localStorageMock.setItem).toHaveBeenCalledWith('mrip-theme', 'light')
+ expect(store.currentMode).toBe('light')
expect(setAttributeMock).toHaveBeenCalledWith('data-theme', 'light')
})
@@ -87,6 +78,12 @@ describe('theme store', () => {
expect(store.allThemes.every(t => t.builtin)).toBe(true)
})
+ it('darkThemes has 5, lightThemes has 4', () => {
+ const store = useThemeStore()
+ expect(store.darkThemes).toHaveLength(5)
+ expect(store.lightThemes).toHaveLength(4)
+ })
+
it('currentMeta returns metadata for active theme', () => {
const store = useThemeStore()
store.init()
@@ -94,48 +91,50 @@ describe('theme store', () => {
expect(store.currentMeta?.name).toBe('Cyberpunk')
})
- it('isDark is true for cyberpunk and dark themes', () => {
+ it('isDark reflects current mode', () => {
const store = useThemeStore()
store.init()
expect(store.isDark).toBe(true)
-
- store.setTheme('dark')
- expect(store.isDark).toBe(true)
- })
-
- it('isDark is false for light theme', () => {
- const store = useThemeStore()
- store.init()
store.setTheme('light')
expect(store.isDark).toBe(false)
+ store.setTheme('hacker')
+ expect(store.isDark).toBe(true)
})
- it('toggleDarkMode switches from dark to light', () => {
+ it('toggleDarkMode switches between admin dark and light themes', () => {
const store = useThemeStore()
- store.init() // starts on cyberpunk (dark)
+ store.init() // cyberpunk (dark)
store.toggleDarkMode()
expect(store.currentTheme).toBe('light')
expect(store.isDark).toBe(false)
- })
-
- it('toggleDarkMode switches from light back to last dark theme', () => {
- const store = useThemeStore()
- store.init()
- // Start on cyberpunk, toggle to light, toggle back
- store.toggleDarkMode()
- expect(store.currentTheme).toBe('light')
store.toggleDarkMode()
expect(store.currentTheme).toBe('cyberpunk')
expect(store.isDark).toBe(true)
})
- it('toggleDarkMode remembers dark theme when starting from dark', () => {
+ it('toggleDarkMode uses admin-configured themes', () => {
+ const configStore = useConfigStore()
+ configStore.config = {
+ theme_dark: 'neon',
+ theme_light: 'arctic',
+ theme_default_mode: 'dark',
+ } as any
+
const store = useThemeStore()
store.init()
- store.setTheme('dark') // switch to the "dark" theme (not cyberpunk)
+ expect(store.currentTheme).toBe('neon')
store.toggleDarkMode()
- expect(store.currentTheme).toBe('light')
+ expect(store.currentTheme).toBe('arctic')
store.toggleDarkMode()
- expect(store.currentTheme).toBe('dark') // returns to dark, not cyberpunk
+ expect(store.currentTheme).toBe('neon')
+ })
+
+ it('updateAdminConfig changes the theme pair', () => {
+ const store = useThemeStore()
+ store.init()
+ store.updateAdminConfig('midnight', 'solarized', 'light')
+ expect(store.adminDarkTheme).toBe('midnight')
+ expect(store.adminLightTheme).toBe('solarized')
+ expect(store.adminDefaultMode).toBe('light')
})
})