design: dark mode audit — ensure all components respect dark mode CSS tokens

[magic-peach]

Several UI components have hard-coded colour values (Tailwind bg-white, text-gray-*, border-gray-*) that do not switch correctly in dark mode. This results in invisible text, incorrect backgrounds, and poor contrast in dark mode.

What to fix

Audit every component in src/components/ and replace any hard-coded colour utilities with the CSS variable tokens:

Replace	With
bg-white	bg-[var(--surface)]
text-gray-900, text-black	text-[var(--text)]
text-gray-500, text-gray-400	text-[var(--muted)]
border-gray-200, border-gray-300	border-[var(--border)]
bg-gray-50, bg-gray-100	bg-[var(--bg)]

Files to audit

All files in src/components/ and src/app/

Acceptance criteria

• Toggle dark mode — all text, backgrounds, and borders look correct
• No component has hard-coded text-white / text-black / bg-white that conflicts with dark mode
• Contrast ratios meet WCAG AA (4.5:1 for normal text, 3:1 for large text) in both modes
• bun run lint and bunx tsc --noEmit still pass

---

Screen Recording Required

Your PR for this issue must include a screen recording showing the feature working on your local machine (bun run dev → http://localhost:3000). PRs without a recording will not be merged.

See CONTRIBUTING.md for how to record.

[github-actions]

👋 Thanks for opening an issue, @magic-peach!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[github-actions]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[Prashant-kumar-8312]

Hi @magic-peach , I'd like to work on this issue contributing under GSSoC'26.
please assign me this issue.

[github-actions]

Hey @Prashant-kumar-8312, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.

[souumyajha]

Hi @magic-peach 👋

I’m also very interested in this issue under GSSoC'26, especially because it focuses on UI consistency, accessibility, and dark mode design systems.

I’ve worked with Tailwind theming and token-based styling before, so if this issue becomes available later due to inactivity/unassignment, I’d be happy to contribute 🚀

[Nidhi782]

I'd like to work on this issue contributing under GSSoC'26.
please assign me this issue.

[github-actions]

Hey @Nidhi782, this issue is already assigned to @Prashant-kumar-8312. Please pick another issue or wait for it to become available. You can browse open unassigned issues here: https://github.com/magic-peach/reframe/issues?q=is%3Aissue+is%3Aopen+no%3Aassignee