Skip to content

feat: appearance gallery with 5 bundled themes + per-theme chart/card styling#63

Open
josepe98 wants to merge 1 commit into
phuryn:mainfrom
josepe98:feat/theme-switcher
Open

feat: appearance gallery with 5 bundled themes + per-theme chart/card styling#63
josepe98 wants to merge 1 commit into
phuryn:mainfrom
josepe98:feat/theme-switcher

Conversation

@josepe98
Copy link
Copy Markdown

Summary

Adds an Appearance gallery at /themes with 5 bundled themes (Apple, Linear, Vercel, Notion, Stripe) and a live theme hot-swap that persists in localStorage. The dashboard's default look is refreshed to match the Apple theme (SF Pro, sticky glass nav, refined spacing); all other themes can be applied with one click.

  • Themeable CSS variables: chart bar colors (--chart-1--chart-4), card edge definition (--card-radius, --card-border, --shadow), chart label/grid colors
  • /themes gallery: grid of installed themes plus a catalog of available ones (from awesome-design-md); per-card preview renders a miniature of the dashboard shell
  • Hot-swap via window.opener.setTheme() — no page reload; confirmation modal auto-closes the gallery tab after 3s
  • cmd_theme() CLI (python cli.py theme list | add <id> | remove <id>) — theme add generates a new theme from an awesome-design-md spec via the Claude API (requires ANTHROPIC_API_KEY)
  • DESIGN.md — Apple design system reference used by the default theme

The existing Rescan button and sortable column features are preserved; the theme variables layer beneath them without altering behavior.

What's not included

Test plan

  • python -m unittest discover -s tests — 84 pass
  • GET / → 200; GET /themes → 200; GET /api/themes → lists 5 bundled themes
  • POST /api/rescan → 200 (existing upstream feature still works)
  • Theme switcher applies live; localStorage persists across reloads
  • Visual review: all 5 themes render; charts pick up per-theme colors; Appearance + Rescan buttons both visible in header

🤖 Generated with Claude Code

…ling

- Appearance gallery at /themes with 5 bundled themes (Apple, Linear, Vercel, Notion, Stripe)
- Live theme hot-swap via window.opener with localStorage persistence
- Per-theme chart bar colors (--chart-1 through --chart-4 CSS variables)
- Per-theme card edge definition (--card-radius, --card-border, --shadow)
- Post-apply modal with 3-second countdown that auto-closes the gallery tab
- Apple design system applied (SF Pro fonts, glass nav, refined spacing)
- cmd_theme() CLI for generating themes from awesome-design-md via Claude API
- PORT env var support for non-interactive dashboard startup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@josepe98 josepe98 force-pushed the feat/theme-switcher branch from 367a748 to 20d62f1 Compare May 17, 2026 11:46
@josepe98
Copy link
Copy Markdown
Author

Rebased onto current main (was 22 commits behind). The branch now sits cleanly on top of all recently merged features — date range filters (#43), hourly chart (#72), week command (#64), cost-by-project table (#48), and the rescan/pricing fixes. No behaviour changes; just conflict resolution to keep the theme layer compatible with the new upstream code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant