Build a seasonal theme system

[Krzysztof-Cieslak]

Summary

Add a seasonal theme system that automatically adjusts the app's look and feel based on the current time of year, reinforcing the calm, aesthetic vibe of Calm HN.

Motivation

The app currently uses a single static color palette (neutral/slate grays with orange accents). A seasonal theme system would make the experience feel more alive and connected to the real world — subtly shifting colors, accents, and mood throughout the year.

Proposed Seasons & Palettes

Season	Months	Accent Colors	Mood
🌸 Spring	Mar – May	Soft greens, pastel pinks	Fresh, light
☀️ Summer	Jun – Aug	Warm yellows, sky blues	Bright, airy
🍂 Autumn	Sep – Nov	Burnt orange, amber, warm browns	Cozy, warm
❄️ Winter	Dec – Feb	Cool blues, soft whites, silver	Crisp, serene

Implementation Ideas

• CSS variables / Tailwind theme tokens — Define seasonal color palettes as CSS custom properties or Tailwind config extensions, swapped based on the current date.
• Auto-detection — Determine the season from new Date() at load time.
• Manual override — Allow users to pick a preferred season via a small UI toggle (persisted in localStorage).
• Smooth transitions — Use CSS transitions so theme changes feel gradual and calming.
• Scope of theming — Background tints, accent colors (links, scores, hover states), and potentially subtle decorative touches (e.g., a small seasonal icon in the header).

Technical Considerations

• The app currently uses Tailwind CSS utility classes with no CSS variables or theme abstraction. Introducing CSS custom properties for colors would be the first step.
• Keep the themes subtle — this is Calm HN, not a holiday explosion.
• Ensure sufficient contrast and accessibility (WCAG AA) for every palette.
• Consider extracting theme logic into a dedicated module (e.g., src/theme/) as the src/ directory is currently flat.

Acceptance Criteria

• Season is auto-detected on page load
• Four distinct but subtle seasonal palettes are applied
• Users can manually override the season (persisted across sessions)
• All themes meet WCAG AA contrast requirements
• Transitions between themes are smooth