[WIP] Add theming to hacker dashboard

[DGoel1602]

Why

We need theming for hackathon dashboard and to have it be customizable from officer hackathon view.

What

Added the ability to modify the background, foreground, primary, and ring color CSS variables on the fly using hex codes pulled and customized from the officer hackathon view. Autuomatically activates and deactives when switching to and from the hack dashboard. Added support for custom bakcground images for any given hackathon.

Test Plan

recording_2026-06-12_16.13.34.mp4

Checklist

• Database: No schema changes, OR I ran pnpm db:generate and committed the generated files in packages/db/drizzle/
• Environment Variables: No environment variables changed, OR I have contacted the Development Lead to modify them on Coolify BEFORE merging.

[coderabbitai]

Important

Review skipped

Ignore keyword(s) in the title.

⛔ Ignored keywords (4)

• WIP
• DO NOT MERGE
• DO NOT REVIEW
• wip

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: d2169d76-b8ec-44f0-8768-c8d4bc52fa73

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch hacker-dashboard/theme

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}