From c01022aeb20a4bfb0d13b8b1901771420d9fb2b0 Mon Sep 17 00:00:00 2001 From: neon <18559658+neonsolstice@users.noreply.github.com> Date: Mon, 19 Oct 2026 23:23:13 +0000 Subject: [PATCH] chore(client): default new users to Nostalgia and teal Give users without stored appearance choices the Nostalgia style and teal accent while preserving saved selections and BookOrbit styling on standalone pages. --- client/public/theme-init.js | 4 ++-- client/src/lib/theme-accent-meta.ts | 2 +- client/src/stores/__tests__/theme.spec.ts | 17 +++++++++++------ client/src/stores/theme.ts | 2 +- packages/types/src/theme.ts | 4 ++-- 5 files changed, 17 insertions(+), 12 deletions(-) diff --git a/client/public/theme-init.js b/client/public/theme-init.js index 1a19a57c3..c46e00580 100644 --- a/client/public/theme-init.js +++ b/client/public/theme-init.js @@ -24,9 +24,9 @@ var root = document.documentElement var theme = readStoredValue('theme', 'system') - var accent = readStoredValue('accent', 'blue') + var accent = readStoredValue('accent', 'teal') var radius = readStoredValue('radius', 'default') - var style = readStoredValue('style', 'bookorbit') + var style = readStoredValue('style', 'nostalgia') var surfacePalette = readStoredValue('surfacePalette', 'steel') var rawReach = localStorage.getItem('glowReach') var storedReach = rawReach === null ? 50 : Number(rawReach) diff --git a/client/src/lib/theme-accent-meta.ts b/client/src/lib/theme-accent-meta.ts index bf26d5fbe..9000e8982 100644 --- a/client/src/lib/theme-accent-meta.ts +++ b/client/src/lib/theme-accent-meta.ts @@ -99,7 +99,7 @@ const ACCENT_META_BY_ID: Record = { blush: { label: 'Blush', tone: 'pastel', hue: 328, primary: [0.68, 0.13, 0.81, 0.12] }, } -export const DEFAULT_ACCENT: Accent = 'blue' +export const DEFAULT_ACCENT: Accent = 'teal' export function resolveAccent(accent: string | null | undefined): Accent { if (!accent) return DEFAULT_ACCENT diff --git a/client/src/stores/__tests__/theme.spec.ts b/client/src/stores/__tests__/theme.spec.ts index e47288060..e72fe5480 100644 --- a/client/src/stores/__tests__/theme.spec.ts +++ b/client/src/stores/__tests__/theme.spec.ts @@ -176,6 +176,7 @@ describe('useThemeStore', () => { beforeEach(() => { const colorScheme = createColorSchemeQuery(false) stubColorScheme(colorScheme.query) + localStorage.setItem('style', '"bookorbit"') document.documentElement.style.removeProperty('--shell-surface-opacity') }) @@ -229,13 +230,14 @@ describe('useThemeStore', () => { document.documentElement.removeAttribute('data-surface') }) - it('starts on the BookOrbit style with the steel palette', () => { + it('starts on the Nostalgia style with the teal accent and steel palette', () => { setActivePinia(createPinia()) const store = useThemeStore() - expect(store.style).toBe('bookorbit') + expect(store.style).toBe('nostalgia') + expect(store.accent).toBe('teal') expect(store.surfacePalette).toBe('steel') - expect(document.documentElement.getAttribute('data-style')).toBe('bookorbit') + expect(document.documentElement.getAttribute('data-style')).toBe('nostalgia') expect(document.documentElement.getAttribute('data-surface')).toBe('steel') }) @@ -259,7 +261,7 @@ describe('useThemeStore', () => { setActivePinia(createPinia()) const store = useThemeStore() - expect(store.style).toBe('bookorbit') + expect(store.style).toBe('nostalgia') expect(store.surfacePalette).toBe('steel') }) @@ -296,12 +298,13 @@ describe('useThemeStore', () => { setActivePinia(createPinia()) const store = useThemeStore() - expect(store.styleDefinition.controls.surfacePalette).toBe(false) - store.setStyle('nostalgia') expect(store.styleDefinition.controls.surfacePalette).toBe(true) + store.setStyle('bookorbit') + expect(store.styleDefinition.controls.surfacePalette).toBe(false) }) it('changes the appearance key only for settings that change token values', () => { + localStorage.setItem('style', '"bookorbit"') setActivePinia(createPinia()) const store = useThemeStore() const initial = store.appearanceKey @@ -322,6 +325,7 @@ describe('useThemeStore', () => { }) it('paints the pinned brightness and opacity under Nostalgia and keeps the stored ones', async () => { + localStorage.setItem('style', '"bookorbit"') localStorage.setItem('brightness', '80') localStorage.setItem('surfaceOpacity', '85') setActivePinia(createPinia()) @@ -362,6 +366,7 @@ describe('useThemeStore', () => { }) it('drops the background pattern under Nostalgia and restores the stored one after', () => { + localStorage.setItem('style', '"bookorbit"') localStorage.setItem('background', '"aurora"') setActivePinia(createPinia()) const store = useThemeStore() diff --git a/client/src/stores/theme.ts b/client/src/stores/theme.ts index 7ac587e04..af5ab5b25 100644 --- a/client/src/stores/theme.ts +++ b/client/src/stores/theme.ts @@ -143,7 +143,7 @@ export const useThemeStore = defineStore('theme', () => { /** A style dresses the app shell only; sign-in pages and readers always paint as BookOrbit. */ const styleScopeActive = ref(isAppShellPath(window.location.pathname)) - const appliedStyle = computed