feat(theme): Add user-selectable color themes

[alphatrl]

Purpose

Introduce a theme system that lets users switch between color themes (Blue, Red, Emerald, Pink) from the navigation menu. The selected theme persists across sessions via localStorage.

Changes

• Add CSS custom properties for theme colors (--theme-50 through --theme-950) with palettes for each theme, mapped through Tailwind's @theme directive
• Add ThemeContext with ThemeWrapper provider and useTheme hook for theme state management
• Add inline script in _document.tsx to apply the saved theme before first paint, avoiding flash of default theme
• Add ThemeSubmenu dropdown in the nav header for theme selection with color dot previews
• Replace all hardcoded sky-* / text-sky-* color classes with theme-* equivalents across components
• Fix <title> hydration warning caused by multiple child nodes in SEO component

Files changed

• src/styles/globals.css — Theme CSS variables and @theme registration
• src/shared/contexts/ThemeContext.tsx — Theme context, provider, and hook
• src/pages/_document.tsx — Inline script for pre-render theme application
• src/pages/_app.tsx — Wrap app with ThemeWrapper
• src/shared/components/navigation/NavHeader/components/MoreButton/ — Refactored to directory, added ThemeSubmenu
• src/styles/calendar.css — Replaced sky-* with theme-*
• src/shared/components/SEO.tsx — Fix title hydration warning
• Various widget/component files — Replaced hardcoded sky-* classes with theme-*

Demo

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
classmaid	Ready	Preview, Comment	Apr 1, 2026 8:47am