refactor(theme): fix theme consistency and persistence
- Apply server-side theme rendering to authenticated pages
- bookshelf.templ: use dynamic theme-{ user.Theme }
- admin pages: use dynamic theme rendering
- Add progressive enhancement for public pages
- index.templ, login.templ, register.templ: inline localStorage check
- Prevents theme flash on page load
- Consolidate wood theme logic into theme.ts
- Move wood gradient handling from header.ts to theme.ts
- Apply wood themes consistently via applyTheme()
- Export applyTheme to window for use by header.ts
- Fix theme selector by adding theme.js to header template
This commit is contained in:
+5
-33
@@ -27,39 +27,11 @@ const toggleUserMenu = (): void => {
|
||||
};
|
||||
|
||||
const changeThemeTo = (theme: string): void => {
|
||||
// Apply the theme
|
||||
if (theme.startsWith('wood-')) {
|
||||
// Apply wood background theme
|
||||
document.body.className = `theme-${theme}`;
|
||||
|
||||
// Set wood background style
|
||||
let woodGradient = '';
|
||||
switch (theme) {
|
||||
case 'wood-light':
|
||||
woodGradient = 'linear-gradient(135deg, #deb887 0%, #d2a679 50%, #c9975b 100%)';
|
||||
break;
|
||||
case 'wood-dark':
|
||||
woodGradient = 'linear-gradient(135deg, #8b7355 0%, #6b5344 50%, #5a4636 100%)';
|
||||
break;
|
||||
case 'wood-mahogany':
|
||||
woodGradient = 'linear-gradient(135deg, #a0522d 0%, #8b4513 50%, #7a3c10 100%)';
|
||||
break;
|
||||
}
|
||||
|
||||
document.body.style.background = woodGradient;
|
||||
document.body.style.backgroundSize = 'cover';
|
||||
document.body.style.backgroundAttachment = 'fixed';
|
||||
} else {
|
||||
// Apply regular theme
|
||||
document.body.className = `theme-${theme}`;
|
||||
document.body.style.background = '';
|
||||
document.body.style.backgroundSize = '';
|
||||
document.body.style.backgroundAttachment = '';
|
||||
// Apply the theme using the consolidated function from theme.ts
|
||||
if ((window as any).applyTheme) {
|
||||
(window as any).applyTheme(theme);
|
||||
}
|
||||
|
||||
// Save to localStorage
|
||||
localStorage.setItem('theme', theme);
|
||||
|
||||
|
||||
// Save to server if logged in
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
@@ -72,7 +44,7 @@ const changeThemeTo = (theme: string): void => {
|
||||
body: JSON.stringify({ theme })
|
||||
}).catch(err => console.log('Theme save failed', err));
|
||||
}
|
||||
|
||||
|
||||
// Close dropdown
|
||||
const dropdown = document.getElementById('theme-dropdown');
|
||||
if (dropdown) {
|
||||
|
||||
Reference in New Issue
Block a user