Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

refactor(theme): fix theme consistency and persistence

Browse Source 
- 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:
john-okeefe
2026-02-24 10:25:06 -05:00
parent 4be69861bd
commit 7a420ef975
6 changed files with 75 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/bookshelf.templ
+1 -1
View File
@@ -12,7 +12,7 @@ templ BookShelf(user User, libraries []LibraryData) {
<script src="/static/search.js"></script> <script src="/static/search.js"></script>
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
</head> </head>
<body class="theme-tokyo-night"> <body class="theme-{ user.Theme }">
@Header(user, "/bookshelf") @Header(user, "/bookshelf")
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:8 py-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:8 py-8">
<!-- Library Selector --> <!-- Library Selector -->
templates/index.templ
+9
View File
@@ -12,6 +12,15 @@ templ Index(loggedIn bool) {
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
</head> </head>
<body class="theme-tokyo-night"> <body class="theme-tokyo-night">
<script>
// Progressive enhancement: check localStorage immediately
(function() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme && savedTheme !== 'tokyo-night') {
document.body.className = 'theme-' + savedTheme;
}
})();
</script>
<!-- Hero Section --> <!-- Hero Section -->
<div class="relative overflow-hidden"> <div class="relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-10"></div> <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-10"></div>
templates/login.templ
+9
View File
@@ -13,6 +13,15 @@ templ Login(sessionExpired bool, deleted bool) {
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
</head> </head>
<body class="theme-tokyo-night min-h-screen"> <body class="theme-tokyo-night min-h-screen">
<script>
// Progressive enhancement: check localStorage immediately
(function() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme && savedTheme !== 'tokyo-night') {
document.body.className = 'theme-' + savedTheme + ' min-h-screen';
}
})();
</script>
<div class="container mx-auto px-4 py-8 max-w-md"> <div class="container mx-auto px-4 py-8 max-w-md">
<div class="flex justify-between items-center mb-8"> <div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold">Login to Bookhoard</h1> <h1 class="text-3xl font-bold">Login to Bookhoard</h1>
templates/register.templ
+9
View File
@@ -13,6 +13,15 @@ templ Register() {
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
</head> </head>
<body class="theme-tokyo-night min-h-screen"> <body class="theme-tokyo-night min-h-screen">
<script>
// Progressive enhancement: check localStorage immediately
(function() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme && savedTheme !== 'tokyo-night') {
document.body.className = 'theme-' + savedTheme + ' min-h-screen';
}
})();
</script>
<div class="container mx-auto px-4 py-8 max-w-md"> <div class="container mx-auto px-4 py-8 max-w-md">
<h1 class="text-3xl font-bold text-center mb-8">Register for Bookhoard</h1> <h1 class="text-3xl font-bold text-center mb-8">Register for Bookhoard</h1>
web/src/header.ts
+5 -33
View File
@@ -27,39 +27,11 @@ const toggleUserMenu = (): void => {
}; };
const changeThemeTo = (theme: string): void => { const changeThemeTo = (theme: string): void => {
// Apply the theme // Apply the theme using the consolidated function from theme.ts
if (theme.startsWith('wood-')) { if ((window as any).applyTheme) {
// Apply wood background theme (window as any).applyTheme(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 = '';
} }
// Save to localStorage
localStorage.setItem('theme', theme);
// Save to server if logged in // Save to server if logged in
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
if (token) { if (token) {
@@ -72,7 +44,7 @@ const changeThemeTo = (theme: string): void => {
body: JSON.stringify({ theme }) body: JSON.stringify({ theme })
}).catch(err => console.log('Theme save failed', err)); }).catch(err => console.log('Theme save failed', err));
} }
// Close dropdown // Close dropdown
const dropdown = document.getElementById('theme-dropdown'); const dropdown = document.getElementById('theme-dropdown');
if (dropdown) { if (dropdown) {
web/src/theme.ts
+42 -7
View File
@@ -1,6 +1,6 @@
// Theme management functionality // Theme management functionality
type ThemeType = type ThemeType =
| 'tokyo-night' | 'tokyo-night'
| 'dracula' | 'dracula'
| 'nord' | 'nord'
@@ -11,15 +11,47 @@ type ThemeType =
| 'catppuccin-mocha' | 'catppuccin-mocha'
| 'catppuccin-macchiato' | 'catppuccin-macchiato'
| 'catppuccin-frappe' | 'catppuccin-frappe'
| 'catppuccin-latte'; | 'catppuccin-latte'
| 'wood-light'
| 'wood-dark'
| 'wood-mahogany';
const DEFAULT_THEME: ThemeType = 'tokyo-night'; const DEFAULT_THEME: ThemeType = 'tokyo-night';
const THEME_STORAGE_KEY = 'theme'; const THEME_STORAGE_KEY = 'theme';
const TOKEN_STORAGE_KEY = 'token'; const TOKEN_STORAGE_KEY = 'token';
// Apply theme to document body // Apply theme to document body
const applyTheme = (theme: ThemeType): void => { const applyTheme = (theme: string): void => {
document.body.className = `theme-${theme}`; // Handle wood themes with gradients
if (theme.startsWith('wood-')) {
document.body.className = `theme-${theme}`;
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;
default:
woodGradient = '';
}
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 = '';
}
localStorage.setItem(THEME_STORAGE_KEY, theme); localStorage.setItem(THEME_STORAGE_KEY, theme);
}; };
@@ -64,16 +96,16 @@ const changeTheme = async (): Promise<void> => {
const loadUserTheme = async (): Promise<void> => { const loadUserTheme = async (): Promise<void> => {
const token = localStorage.getItem(TOKEN_STORAGE_KEY); const token = localStorage.getItem(TOKEN_STORAGE_KEY);
if (!token) return; if (!token) return;
try { try {
const response = await fetch('/api/auth/profile', { const response = await fetch('/api/auth/profile', {
headers: { 'Authorization': `Bearer ${token}` } headers: { 'Authorization': `Bearer ${token}` }
}); });
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
if (data.theme) { if (data.theme) {
applyTheme(data.theme); applyTheme(data.theme as string);
} }
} }
} catch { } catch {
@@ -127,3 +159,6 @@ if (typeof document !== 'undefined') {
// Make changeTheme available globally for HTML onchange attribute // Make changeTheme available globally for HTML onchange attribute
(window as any).changeTheme = changeTheme; (window as any).changeTheme = changeTheme;
// Export applyTheme to window for use by header.ts
(window as any).applyTheme = applyTheme;