mirror of
https://github.com/bookorbit/bookorbit.git
synced 2026-11-03 00:11:37 -06:00
feat(client): add the Nostalgia appearance style
Add a Style setting beside mode, accent, radius and background. Nostalgia restyles the app through tokens only (neutral surface palettes, system type, flat shell, top glow) and pins background, opacity and brightness. Add a top glow reach slider for both styles. Tidy the theme layer first: charts read live tokens, bare `rounded` follows the radius scale, one shared sign-in toolbar. Also carries the settings page header redesign.
This commit is contained in:
@@ -2,19 +2,42 @@
|
||||
function readStoredValue(key, fallback) {
|
||||
var stored = localStorage.getItem(key)
|
||||
if (stored === null) return fallback
|
||||
var value = stored
|
||||
try {
|
||||
return JSON.parse(stored)
|
||||
value = JSON.parse(stored)
|
||||
} catch {
|
||||
return stored
|
||||
value = stored
|
||||
}
|
||||
return typeof value === 'string' ? value : fallback
|
||||
}
|
||||
|
||||
// Mirrors STANDALONE_ROUTE_PREFIXES in src/lib/theme-styles.ts; theme-init.spec.ts keeps them equal.
|
||||
var STANDALONE_ROUTE_PREFIXES = ['/read/', '/login', '/register', '/setup', '/forgot-password', '/reset-password', '/oauth2-callback', '/magic']
|
||||
|
||||
function isAppShellPath(path) {
|
||||
for (var i = 0; i < STANDALONE_ROUTE_PREFIXES.length; i++) {
|
||||
var prefix = STANDALONE_ROUTE_PREFIXES[i]
|
||||
if (path === prefix || path.indexOf(prefix.charAt(prefix.length - 1) === '/' ? prefix : prefix + '/') === 0) return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
var root = document.documentElement
|
||||
var theme = readStoredValue('theme', 'system')
|
||||
var accent = readStoredValue('accent', 'neutral')
|
||||
var accent = readStoredValue('accent', 'blue')
|
||||
var radius = readStoredValue('radius', 'default')
|
||||
var style = readStoredValue('style', 'bookorbit')
|
||||
var surfacePalette = readStoredValue('surfacePalette', 'steel')
|
||||
var rawReach = localStorage.getItem('glowReach')
|
||||
var storedReach = rawReach === null ? 80 : Number(rawReach)
|
||||
var glowReach = isFinite(storedReach) ? Math.min(200, Math.max(0, storedReach)) : 80
|
||||
var systemDark = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
var isDark = theme === 'dark' || (theme !== 'light' && systemDark)
|
||||
if (isDark) document.documentElement.classList.add('dark')
|
||||
if (accent !== 'neutral') document.documentElement.classList.add('accent-' + accent)
|
||||
if (radius !== 'default') document.documentElement.classList.add('radius-' + radius)
|
||||
if (isDark) root.classList.add('dark')
|
||||
root.classList.add('accent-' + accent)
|
||||
if (radius !== 'default') root.classList.add('radius-' + radius)
|
||||
root.setAttribute('data-style', isAppShellPath(window.location.pathname) ? style : 'bookorbit')
|
||||
root.setAttribute('data-surface', surfacePalette)
|
||||
root.style.setProperty('--glow-reach', String(glowReach / 100))
|
||||
root.setAttribute('data-glow', glowReach > 0 ? 'on' : 'off')
|
||||
})()
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Reference in New Issue
Block a user