feat(settings): add theme preset selection support

[CyraTechZenith]

Summary

Adds theme preset selection support to the Settings page, allowing users to choose from multiple predefined themes while preserving existing theme functionality and user preferences.

Closes #252

---

Type of Change

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

---

Changes Made

• Added centralized theme configuration in src/lib/themes.ts
• Added ThemePresetPicker component for selecting theme presets
• Extended ThemeContext to support multiple theme options
• Added new theme variants:
• • Dracula
• • Nord
• • Catppuccin Mocha
• • Solarized Dark
• Added corresponding theme CSS variables and styling
• Integrated theme preset selection into the Settings page
• Preserved existing light/dark theme behavior
• Added theme persistence using local storage

---

How to Test

Steps for the reviewer to verify this works:

• Run the application locally
• Navigate to Settings
• Verify the theme preset selector is displayed
• Select each available theme preset
• Confirm UI colors update correctly
• Refresh the page and verify the selected theme persists
• Verify existing light/dark functionality continues to work as expected
• Verify the Settings page remains responsive on different screen sizes

---

Screenshots (if UI change)

Custom Theme:

Light/Dark Theme:

Theme Presets:

---

Checklist

• Linked issue in summary
• npm run lint passes locally (pre-existing warnings remain)
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

---

Accessibility Checklist

• Proper keyboard navigation tested
• Responsive UI verified
• Accessibility labels added where needed

---

Additional Notes

npm run lint completes successfully. Existing repository warnings unrelated to this change remain and were not introduced by this PR.

This change only affects theme selection functionality and does not modify existing user settings, GitHub integrations, notification preferences, timezone settings, Discord webhook settings, pinned repositories, or weekly digest preferences.

[vercel]

@CyraTechZenith 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]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!