feat(web): charm-reader visual refresh with light/dark theme toggle (ADR-032, #17)

The UI read flat and boring. Reskin to one charm/TUI-inspired layout in two palettes (CSS custom properties): a warm "reader" light theme (sketch B) and a "cozy terminal" dark theme (sketch C). - Palette chosen in cascade order: :root light default; an OS-preference dark block scoped to :root:not([data-theme]) so it applies only absent an explicit choice; and :root[data-theme="dark"|"light"] set by a header toggle that outranks the media query by specificity and persists in localStorage (guarded, degrades to OS default). A <head> init script applies the stored choice before paint, so no flash of the wrong palette. - Charm touches via existing classes (no templ structure churn): monospace meta lines, accent uppercase section dividers with a trailing rule, pill buttons, a lifted/accent-edged expanded card. - Error/danger shades become --err-* tokens so they follow the theme, replacing three per-block prefers-color-scheme dark overrides. - Theme toggle wired into Layout and PublicLayout headers. BDD: docs/use-cases/visual_theme.feature un-pended, mapped in scenarioCoverage. TDD: internal/web/visual_theme_test.go (palettes, OS default, persisted toggle, expanded-card embed). Verified light+dark on list/reader/welcome via web-shot. Sketches kept as the design record. ui-spec.md as-built row added. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-12 12:54:06 +02:00
parent b01f8d5783
commit 64e3368f5f
7 changed files with 553 additions and 417 deletions
@@ -33,6 +33,12 @@ var scenarioCoverage = map[string]string{
 	"With JS off the card still reaches the full summary":         "TestCompactCardHasNoJSDetailFallback",
 	"The detail page and the expanded card show the same summary": "TestDetailAndExpandShareSummaryBody",

+	// visual_theme.feature (ADR-032, #17)
+	"Light and dark themes share one layout via CSS variables":    "TestThemeHasLightAndDarkPalettes",
+	"Without a stored choice the theme follows the OS preference": "TestThemeFollowsOSPreference",
+	"A persisted toggle switches light and dark":                  "TestThemeTogglePersists",
+	"The expanded card embeds the video player":                   "TestExpandedCardEmbedsVideo",
+
 	// observability.feature (ADR-030, #15)
 	"Summarization latency is recorded per endpoint":            "TestSummarizerRecordsMetric",
 	"A failing summarizer endpoint records its failure outcome": "TestObserveSummarizeRecordsFailureOutcomes",