feat(ui): theme system — amber/slate/rose, profile picker, full token migration
Some checks failed
CI / Backend (pull_request) Successful in 44s
CI / UI (pull_request) Successful in 25s
CI / UI (push) Successful in 27s
Release / Test backend (push) Successful in 42s
CI / Backend (push) Successful in 44s
Release / Check ui (push) Successful in 24s
Release / Docker / caddy (push) Failing after 1m4s
Release / Docker / backend (push) Failing after 44s
Release / Docker / ui (push) Failing after 29s
Release / Docker / runner (push) Failing after 54s
Release / Gitea Release (push) Has been skipped

- Add CSS custom property token system in app.css (@theme + [data-theme] overrides)
- Three themes: amber (default), slate (indigo/dark), rose (dark pink)
- Flash prevention via inline <script> in <svelte:head> sets data-theme before paint
- Theme context (setContext/getContext) in +layout.svelte for live preview
- Theme persisted via PocketBase user_settings (PBUserSettings.theme field)
- /api/settings GET/PUT updated to handle theme field alongside existing settings
- Profile page: new Appearance section with 3 colour-swatch theme picker
- Full token migration across all 36 route/component files:
  zinc/amber hardcoded Tailwind classes → CSS var utilities (bg-(--color-surface), etc.)
- UI primitives (Badge, Button, Card, Dialog, Separator, Textarea) migrated
- accent-amber-400 replaced with inline style accent-color: var(--color-brand)
This commit is contained in:
Admin
2026-03-28 23:57:16 +05:00
parent 801928aadf
commit 7a2a4fc755
36 changed files with 846 additions and 726 deletions

View File

@@ -3,14 +3,14 @@
</svelte:head>
<div class="max-w-2xl mx-auto py-10 px-4">
<h1 class="text-2xl font-bold text-zinc-100 mb-6">Terms of Service</h1>
<h1 class="text-2xl font-bold text-(--color-text) mb-6">Terms of Service</h1>
<div class="space-y-5 text-sm text-zinc-400 leading-relaxed">
<div class="space-y-5 text-sm text-(--color-muted) leading-relaxed">
<p>
By using libnovel you agree to these terms. If you do not agree, please do not use the service.
</p>
<h2 class="text-base font-semibold text-zinc-200 mt-6">Use of the service</h2>
<h2 class="text-base font-semibold text-(--color-text) mt-6">Use of the service</h2>
<ul class="list-disc list-inside space-y-2 pl-1">
<li>libnovel is provided for personal, non-commercial reading use only.</li>
<li>You may not scrape, crawl, or systematically download content from the site.</li>
@@ -18,34 +18,34 @@
<li>Accounts may be suspended or terminated for abuse.</li>
</ul>
<h2 class="text-base font-semibold text-zinc-200 mt-6">Content</h2>
<h2 class="text-base font-semibold text-(--color-text) mt-6">Content</h2>
<p>
libnovel aggregates publicly available web novel content from third-party sources for
personal reading convenience. We do not claim ownership of any novel content displayed on
the site. If you are a rights holder and wish to have content removed, please see our
<a href="/dmca" class="text-amber-400 hover:text-amber-300 transition-colors">DMCA policy</a>.
<a href="/dmca" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">DMCA policy</a>.
</p>
<h2 class="text-base font-semibold text-zinc-200 mt-6">Accounts</h2>
<h2 class="text-base font-semibold text-(--color-text) mt-6">Accounts</h2>
<p>
You are responsible for maintaining the security of your account. libnovel is not liable
for any loss or damage resulting from unauthorised access to your account.
</p>
<h2 class="text-base font-semibold text-zinc-200 mt-6">Disclaimer of warranties</h2>
<h2 class="text-base font-semibold text-(--color-text) mt-6">Disclaimer of warranties</h2>
<p>
The service is provided "as is" without warranty of any kind. We do not guarantee
availability, accuracy, or completeness of any content. See our full
<a href="/disclaimer" class="text-amber-400 hover:text-amber-300 transition-colors">disclaimer</a>
<a href="/disclaimer" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">disclaimer</a>
for details.
</p>
<h2 class="text-base font-semibold text-zinc-200 mt-6">Changes to these terms</h2>
<h2 class="text-base font-semibold text-(--color-text) mt-6">Changes to these terms</h2>
<p>
We may update these terms at any time. Continued use of the service after changes are
posted constitutes acceptance of the revised terms.
</p>
<p class="text-zinc-600 text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
<p class="text-(--color-muted) text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
</div>
</div>