-
feat(web): charm-reader visual refresh with light/dark theme toggle (ADR-032, #17)
released this
2026-06-12 10:54:06 +00:00 | 12 commits to main since this releaseThe 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
Downloads
- Palette chosen in cascade order: :root light default; an OS-preference dark