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>
<link href="/static/style.css" rel="stylesheet">
</head>
<body class="theme-tokyo-night">
<body class="theme-{ user.Theme }">
@Header(user, "/bookshelf")
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:8 py-8">
<!-- Library Selector -->
templates/index.templ
+9
View File
@@ -12,6 +12,15 @@ templ Index(loggedIn bool) {
<link href="/static/style.css" rel="stylesheet">
</head>
<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 -->
<div class="relative overflow-hidden">
<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">
</head>
<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="flex justify-between items-center mb-8">
<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">
</head>
<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">
<h1 class="text-3xl font-bold text-center mb-8">Register for Bookhoard</h1>