feat(web): add smooth theme transition animation

[Jai-Shankar1033]

Summary

The theme toggle was switching instantly which felt jarring compared to the rest of the UI. This PR adds smooth transitions so backgrounds, text, borders and shadows all fade gracefully when switching themes. Also polished up the toggle icon so it animates out and back in instead of just swapping abruptly.

Closes #321

---

Type of Change

• Bug fix
• New feature
• Refactor (no functional change)
• UI / Design change
• Tests only
• Documentation
• Infrastructure / DevOps
• Security

---

What Changed

• Added a scoped transition rule that only fires during theme switches, so hover/focus animations stay snappy
• Toggle icon now fades out with a rotation, swaps, then fades back in
• Added a subtle glow pulse and press effect on the toggle button click
• Fixed prefers-reduced-motion so users who prefer no animations get instant switches

---

How to Test

1. Run pnpm dev inside apps/web
2. Open http://localhost:5173
3. Click the theme toggle and check the smooth fade
4. Try clicking rapidly — should never get stuck

---

Checklist

• My code follows the project's coding style (pnpm -r run lint passes).
• TypeScript compiles without errors (pnpm -r run typecheck).
• I have added or updated tests for the changes I made.
• All tests pass locally (pnpm -r run test).
• I have updated documentation where necessary.
• No new console.log or debug statements left in the code.
• Breaking changes are documented in this PR description.

---

Screenshots / Recordings

---

Additional Context

Checked performance after the changes — no regression:
LCP 0.12s, CLS 0.01, INP 24ms all in the good range.

[vercel]

@Jai-Shankar1033 is attempting to deploy a commit to the Prashantkumar Khatri's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Hi @Jai-Shankar1033,

Thanks for opening this pull request.

This PR has been automatically classified based on the files modified.

Applied Labels

• web

Primary Review Area

• web

Reviewer

@ShantKhatri has been identified as the primary reviewer for this pull request.

If you have any questions regarding the affected area or implementation details, feel free to reach out to the assigned reviewer.

Thank you for your contribution!

[github-actions]

CI — Checks Failed

Backend — SKIP

Check	Result
Lint	-
Test	-
Typecheck	-

Mobile — SKIP

Check	Result
Lint	-
Test	-

Web — FAIL

Check	Result
Check	FAIL
Build	PASS

---

Last updated: Thu, 11 Jun 2026 11:37:33 GMT

[Jai-Shankar1033]

Hey @ShantKhatri, just a heads up — the web-ci lint errors showing up are pre-existing in the codebase and weren't introduced by this PR. I checked the changes and all 4 modified files are clean. Let me know if you have any feedback on the implementation!

[github-actions]

Congratulations @Jai-Shankar1033 on getting PR #536 merged!

Thank you for your contribution to the project.

To receive the appropriate GSSoC labels and recognition, please mention @Harxhit in the #get-labels channel on our Discord server and share your merged PR link.