feat: implement multi-theme engine and dropdown configuration structure #1675

[lavanya1486]

Summary

Enhanced the workspace appearance settings by transitioning from a binary dark/light toggle to a dynamic, multi-theme layout engine. This gives users greater dashboard personalization options based on their visual and workplace preferences.

Closes #1675

---

Type of Change

• New feature
• Bug fix
• Documentation update
• Refactor / code cleanup

---

Changes Made

• Global Tokens (src/app/globals.css): Migrated hardcoded utilities to CSS variables (--background, --accent, etc.) mapped across four distinct theme states: classic-dark, modern-light, nordic-frost, and cyberpunk.
• State Optimization (src/components/ThemeContext.tsx): Rewrote the context module to manage granular string states instead of a boolean value. Included a migration fallback to cleanly bridge existing users' local storage settings from old dark/light flags.
• Dynamic Configuration UI (src/components/ThemeToggle.tsx): Replaced the standard layout icon switch with a fully accessible theme picker dropdown menu powered by lucide-react icons.
• Document Hydration (src/app/layout.tsx): Adjusted the root baseline self-invoking script to accurately inject the correct data-theme attribute server-side, preventing white-flash rendering flickers on initial reload.
• Accessibility Sync (src/components/KeyboardShortcuts.tsx): Updated keyboard shortcut interactions (T) to sequentially cycle through all four configurations seamlessly while broadcasting explicit feedback updates to screen readers.

---

How to Test

Steps for the reviewer to verify these changes locally:

1. Fetch and checkout this branch: git checkout feat/1675-multiple-ui-themes
2. Run the local environment using npm run dev.
3. Locate the new theme dropdown panel inside the navigation layout.
4. Cycle through Classic Dark, Modern Light, Nordic Frost, and Cyberpunk to verify CSS variable updates align instantly.
5. Reload the browser page to ensure your chosen theme selection successfully persists out of localStorage.
6. Press the T key shortcut to confirm cycling behavior operates and updates cleanly.

---

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff

---

Accessibility Checklist

• Proper keyboard navigation tested (sequential cycling via T functional)
• Dynamic screen reader announcements (setAnnouncement) verify state adjustments aloud
• Semantic interactive element rules satisfied via explicit aria-label implementations

[vercel]

@lavanya1486 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

[Priyanshu-byte-coder]

Closing — this PR replaces the .dark CSS class system with [data-theme="classic-dark"] attribute selectors across all components. The project's dark mode is built on the .dark class (set by ThemeContext + a pre-hydration bootstrap script in layout.tsx). Switching to a data-attribute system would break the entire dark mode pipeline. If you'd like to add theme variants, please build on top of the existing .dark class system.