feature/catpuccin themes

docs/guide/using-librislog/profile.md

@@ -59,7 +59,9 @@ Set your preferred timezone for date/time displays (e.g., for the calendar heatm
 
 ## Theme
 
-Choose a custom DaisyUI theme from the dropdown. The theme previews in real-time as you browse the dropdown, and the selection is saved to your profile so it persists across sessions.
+Choose a custom DaisyUI theme from the swatch grid. Each tile previews the theme's surfaces and accent colors, and picking one applies it immediately. Press **Save** to keep it on your profile; leaving the page without saving restores the previous theme.
+
+The grid groups the four [Catppuccin](https://catppuccin.com/palette/) flavors (Latte, Frappé, Macchiato, Mocha) above the built-in DaisyUI themes. Latte is a light flavor, the other three are dark.
 
 ## Reading Goals
 

docs/releases.md

@@ -16,6 +16,7 @@ LibrisLog v1.12.1 fixes a browser freeze in the book detail view. When a book's
 
 | Version | Date | Type |
 |---|---|---|
+| [v1.13.0](#v1-13-0-catppuccin-themes-and-theme-picker) | Unreleased | Feature release |
 | [v1.12.1](#v1-12-1-dst-chart-timezone-fixes) | 2026-11-03 | Maintenance |
 | [v1.12.0](#v1-12-0-mass-tag-editor-profile-pictures-authentication-methods) | 2026-11-02 | Feature release |
 | [v1.11.0](#v1-11-0-reading-sessions-re-reads) | 2026-10-24 | Feature release |
@@ -39,6 +40,28 @@ LibrisLog v1.12.1 fixes a browser freeze in the book detail view. When a book's
 
 ---
 
+## v1.13.0: Catppuccin Themes and Theme Picker
+
+<Badge type="tip" text="Feature release" /> <Badge type="info" text="Unreleased" />
+
+**Summary:** The profile settings gain the four Catppuccin flavors: **Latte** (light), **Frappé**, **Macchiato**, and **Mocha** (dark), and the theme selector becomes a swatch grid with live color previews. The flavors are registered as regular DaisyUI themes from the official Catppuccin daisyUI port, so preview, per-user persistence, chart colors, and the favicon work exactly as they do for the built-in themes. The port's `secondary` color is remapped to Catppuccin's mauve so chart series and secondary buttons stay visible, and Latte gets a contrast-tuned label palette. Existing themes, stored preferences, and the database stay unchanged.
+
+**Features**
+- 🌿 **Four Catppuccin flavors.** Latte is the light flavor; Frappé, Macchiato, and Mocha are dark. They are generated at build time by `@catppuccin/daisyui` and registered as ordinary DaisyUI themes, so live preview, per-user persistence, chart colors, and the favicon work exactly as they do for the built-in themes
+- 🎨 **Swatch-based theme picker.** Themes are now shown as tiles with a live color preview instead of a dropdown. The four Catppuccin flavors are listed first under a "Catppuccin" heading and the built-in DaisyUI themes follow in their own group. Picking a tile applies the theme immediately
+- 🖌️ **Readable secondary color.** The port maps `secondary` to a surface tone, which blends into the page in LibrisLog. It is remapped to Catppuccin's mauve, so chart series, secondary buttons, and the add-book stripe stay visible
+- ☀️ **Latte contrast tuning.** The light flavor keeps its palette but picks the higher-contrast label color per accent (light labels on the darker accents, dark labels on the pale ones) and uses blue instead of lavender for primary, so button and badge labels stay legible
+- 🖼️ **Correct favicon in every flavor.** The dark favicon now follows the applied theme's own `color-scheme`, so the three dark flavors get it automatically and Latte keeps the light one
+
+**Bug fixes**
+- 🔄 **Theme preferences are no longer re-applied on every page load.** The layout compared the stored custom theme against the wrong `localStorage` key, so each load wrote the theme back to storage and repainted the document even when nothing had changed
+
+**Breaking changes:** None. The new themes are additive, there are no API changes, and no database migration is needed (`custom_theme` already stores theme names). Downgrading removes the four themes from the picker; an account that selected one falls back to the default theme until it picks another.
+
+[Compare with v1.12.1](https://github.com/codebude/librislog/compare/v1.12.1...HEAD)
+
+---
+
 ## v1.12.1: DST Chart & Timezone Fixes
 
 <Badge type="info" text="Maintenance" /> <Badge type="info" text="2026-11-03" />

frontend/e2e/specs/11-profile.spec.ts

@@ -31,7 +31,7 @@ test.describe('Profile', () => {
 		await page.goto('/profile');
 		await page.waitForTimeout(1500);
 
-		await page.locator('select[name="custom-theme"]').selectOption('dracula');
+		await page.locator('[data-theme-option="dracula"]').click();
 
 		await page.locator('#section-theme button[class*="btn-primary"]').click();
 		await page.waitForTimeout(1000);
@@ -43,6 +43,78 @@ test.describe('Profile', () => {
 		expect(theme).toBe('dracula');
 	});
 
+	test('11.3b change theme to catppuccin flavors', async ({ page }) => {
+		await page.goto('/profile');
+		await page.waitForTimeout(1500);
+
+		const catppuccinOptions = await page
+			.locator('[data-theme-group="Catppuccin"] [data-theme-option]')
+			.evaluateAll((tiles) =>
+				tiles.map((tile) => ({
+					value: tile.getAttribute('data-theme-option'),
+					label: tile.textContent?.trim()
+				}))
+			);
+		expect(catppuccinOptions).toEqual([
+			{ value: 'latte', label: 'Latte' },
+			{ value: 'frappe', label: 'Frappé' },
+			{ value: 'macchiato', label: 'Macchiato' },
+			{ value: 'mocha', label: 'Mocha' }
+		]);
+		await expect(page.locator('[data-theme-group="DaisyUI"] [data-theme-option="mocha"]')).toHaveCount(0);
+
+		await page.locator('[data-theme-option="mocha"]').click();
+		// Picking previews immediately, before Save is pressed.
+		await expect
+			.poll(() => page.evaluate(() => document.documentElement.getAttribute('data-theme')))
+			.toBe('mocha');
+
+		await page.locator('#section-theme button[class*="btn-primary"]').click();
+		await page.waitForTimeout(1000);
+
+		const saved = page.locator('#section-theme').getByText(/saved|gespeichert/i);
+		await expect(saved).toBeVisible({ timeout: 5000 });
+
+		const theme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+		expect(theme).toBe('mocha');
+
+		const baseColor = await page.evaluate(() =>
+			getComputedStyle(document.documentElement).getPropertyValue('--color-base-100').trim()
+		);
+		expect(baseColor).toMatch(/#1e1e2e|rgb\(30, 30, 46\)/i);
+
+		// The choice must survive a full reload from the stored profile settings.
+		await page.reload();
+		await page.waitForTimeout(1500);
+		const reloadedTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+		expect(reloadedTheme).toBe('mocha');
+		const reloadedBase = await page.evaluate(() =>
+			getComputedStyle(document.documentElement).getPropertyValue('--color-base-100').trim()
+		);
+		expect(reloadedBase).toMatch(/#1e1e2e|rgb\(30, 30, 46\)/i);
+
+		// Light direction: Latte must keep the light favicon.
+		await page.locator('[data-theme-option="latte"]').click();
+		await page.locator('#section-theme button[class*="btn-primary"]').click();
+		await page.waitForTimeout(1000);
+		const latteTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+		expect(latteTheme).toBe('latte');
+		const favicon = await page.evaluate(
+			() => document.querySelector('link[rel="icon"][type="image/svg+xml"]')?.getAttribute('href') ?? ''
+		);
+		expect(favicon).not.toContain('favicon-dark');
+
+		// An unsaved pick is a preview only and must not survive leaving the page.
+		await page.locator('[data-theme-option="frappe"]').click();
+		await expect
+			.poll(() => page.evaluate(() => document.documentElement.getAttribute('data-theme')))
+			.toBe('frappe');
+		await page.goto('/library');
+		await expect
+			.poll(() => page.evaluate(() => document.documentElement.getAttribute('data-theme')))
+			.toBe('latte');
+	});
+
 	test('11.4 create api key', async ({ page }) => {
 		await page.goto('/profile');
 		await page.waitForTimeout(1000);

frontend/package.json

@@ -16,6 +16,7 @@
 		"test:e2e": "docker run --rm -v $(pwd)/../data-e2e:/data alpine sh -c 'rm -rf /data/*' 2>/dev/null; mkdir -p playwright-report test-results && docker compose -f ../docker-compose.e2e.yml up --build --abort-on-container-exit --attach test-runner --no-log-prefix"
 	},
 	"devDependencies": {
+		"@catppuccin/daisyui": "^2.1.1",
 		"@playwright/test": "^1.60.0",
 		"@sveltejs/adapter-auto": "^8.0.0",
 		"@sveltejs/adapter-static": "^4.0.0",

frontend/src/app.css

@@ -61,6 +61,12 @@
   --noise: 0;
 }
 
+/* Catppuccin flavors, from the official daisyUI port */
+@plugin "./lib/themes/catppuccin-latte.ts";
+@plugin "./lib/themes/catppuccin-frappe.ts";
+@plugin "./lib/themes/catppuccin-macchiato.ts";
+@plugin "./lib/themes/catppuccin-mocha.ts";
+
 /* Keep dark cards calm while giving the page and nested surfaces clearer depth. */
 html[data-theme="dark"] {
   --color-base-100: oklch(25.5% 0.018 255);

frontend/src/lib/components/ThemeSwatchPicker.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { Check } from '@lucide/svelte';
+
+	import { themeLabel } from '#lib/stores/theme.js';
+
+	interface ThemeGroup {
+		label: string;
+		themes: readonly string[];
+	}
+
+	let {
+		selected,
+		groups,
+		onSelect,
+		name = 'custom-theme',
+		labelledBy
+	}: {
+		selected: string | null;
+		groups: ThemeGroup[];
+		onSelect?: (theme: string) => void;
+		name?: string;
+		labelledBy?: string;
+	} = $props();
+
+	function headingId(label: string): string {
+		return `theme-group-${label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`;
+	}
+</script>
+
+<div
+	class="max-w-3xl p-1 sm:max-h-80 sm:overflow-y-auto"
+	role="radiogroup"
+	aria-labelledby={labelledBy}
+>
+	<div class="flex flex-col gap-3">
+		{#each groups as group (group.label)}
+			<div
+				class="flex flex-col gap-1.5"
+				role="group"
+				aria-labelledby={headingId(group.label)}
+				data-theme-group={group.label}
+			>
+				<p id={headingId(group.label)} class="text-xs font-semibold tracking-wide text-base-content/60 uppercase">
+					{group.label}
+				</p>
+				<div class="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
+					{#each group.themes as theme (theme)}
+						{@const label = themeLabel(theme)}
+						{@const shortLabel = label.startsWith(`${group.label} `)
+							? label.slice(group.label.length + 1)
+							: label}
+						<label
+							class="group relative flex cursor-pointer flex-col gap-1.5 rounded-xl border p-2 transition focus-within:ring-2 focus-within:ring-primary/60 {selected ===
+							theme
+								? 'border-primary bg-primary/5 ring-2 ring-primary/30'
+								: 'border-base-300 hover:border-primary/50'}"
+							data-theme-option={theme}
+						>
+							<input
+								type="radio"
+								{name}
+								value={theme}
+								checked={selected === theme}
+								class="sr-only"
+								onchange={() => onSelect?.(theme)}
+							/>
+							<span
+								class="pointer-events-none flex h-9 gap-1 rounded-md border border-base-300 p-1"
+								data-theme={theme}
+								aria-hidden="true"
+							>
+								<span class="flex flex-1 flex-col justify-center gap-1 rounded bg-base-100 px-1">
+									<span class="h-1 w-3/4 rounded-full bg-base-content/70"></span>
+									<span class="h-1 w-1/2 rounded-full bg-base-content/40"></span>
+								</span>
+								<span class="flex w-5 flex-col gap-1">
+									<span class="flex-1 rounded bg-primary"></span>
+									<span class="flex-1 rounded bg-secondary"></span>
+								</span>
+								<span class="w-1.5 rounded bg-accent"></span>
+							</span>
+							<span class="flex items-center justify-between gap-1">
+								<span
+									class="min-w-0 truncate text-[11px] leading-tight {selected === theme
+										? 'font-semibold text-base-content'
+										: 'text-base-content/80'}">{shortLabel}</span
+								>
+								{#if selected === theme}
+									<Check class="h-3.5 w-3.5 shrink-0 text-primary" />
+								{/if}
+							</span>
+						</label>
+					{/each}
+				</div>
+			</div>
+		{/each}
+	</div>
+</div>

frontend/src/lib/components/ThemeSwatchPicker.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import ThemeSwatchPicker from './ThemeSwatchPicker.svelte';
+
+const groups = [
+	{ label: 'Catppuccin', themes: ['latte', 'mocha'] },
+	{ label: 'DaisyUI', themes: ['dracula'] }
+];
+
+describe('ThemeSwatchPicker', () => {
+	it('renders one radio per theme and checks the selected one', () => {
+		render(ThemeSwatchPicker, { selected: 'latte', groups });
+
+		expect(screen.getAllByRole('radio')).toHaveLength(3);
+		expect(screen.getByRole('radio', { name: 'Latte' })).toBeChecked();
+		expect(screen.getByRole('radio', { name: 'Dracula' })).not.toBeChecked();
+	});
+
+	it('marks nothing when no custom theme is active', () => {
+		render(ThemeSwatchPicker, { selected: null, groups });
+
+		expect(screen.getAllByRole('radio').some((radio) => (radio as HTMLInputElement).checked)).toBe(false);
+	});
+
+	it('names the groups so short labels keep their context', () => {
+		render(ThemeSwatchPicker, { selected: 'latte', groups });
+
+		expect(screen.getByRole('group', { name: 'Catppuccin' })).toBeInTheDocument();
+		expect(screen.getByRole('group', { name: 'DaisyUI' })).toBeInTheDocument();
+	});
+
+	it('previews every theme with its own theme scope', () => {
+		const { container } = render(ThemeSwatchPicker, { selected: 'latte', groups });
+
+		for (const theme of ['latte', 'mocha', 'dracula']) {
+			expect(container.querySelector(`[data-theme-option="${theme}"] [data-theme="${theme}"]`)).not.toBeNull();
+		}
+	});
+
+	it('reports a newly picked theme', async () => {
+		const onSelect = vi.fn();
+		render(ThemeSwatchPicker, { selected: 'latte', groups, onSelect });
+
+		await fireEvent.click(screen.getByRole('radio', { name: 'Dracula' }));
+
+		expect(onSelect).toHaveBeenCalledWith('dracula');
+	});
+});

frontend/src/lib/components/UserMenu.svelte

@@ -4,7 +4,7 @@
 	import { broadcastLogout, currentUser, csrfToken } from '#lib/stores/auth.js';
 	import type { UpdateInfo } from '#lib/stores/updateCheck.js';
 	import { _ } from '#lib/i18n/index.js';
-	import { cycleTheme, applyThemeToDocument, saveThemeToStorage, getThemeMode, getThemeIcon, getCustomTheme, getThemeVersion } from '#lib/stores/theme.js';
+	import { cycleTheme, applyThemeToDocument, saveThemeToStorage, getThemeMode, getThemeIcon, getCustomTheme, getThemeVersion, themeLabel as formatThemeLabel, clearRestorePoint } from '#lib/stores/theme.js';
 	import UserAvatar from '#lib/components/UserAvatar.svelte';
 	import { Sun, Moon, Palette, CloudDownload, ExternalLink } from '@lucide/svelte';
 
@@ -24,7 +24,7 @@
 		switch (themeMode) {
 			case 'light': return $_('settings.themeLight');
 			case 'dark': return $_('settings.themeDark');
-			case 'custom': return getCustomTheme() ? getCustomTheme()!.charAt(0).toUpperCase() + getCustomTheme()!.slice(1) : $_('settings.themeCustom');
+			case 'custom': return getCustomTheme() ? formatThemeLabel(getCustomTheme()!) : $_('settings.themeCustom');
 		}
 	});
 
@@ -55,6 +55,8 @@
 		themeIcon = getThemeIcon();
 		themeMode = getThemeMode();
 		themeVersion = getThemeVersion();
+		// This change is persisted here, so the profile page must not revert it.
+		clearRestorePoint();
 		applyThemeToDocument();
 		saveThemeToStorage();
 		if ($currentUser) {