Standardize Dark/Light Mode Theme Architecture

[Luluameh]

• Labels: enhancement, styling, theme

Description

While tailwind and next-themes are present, some CSS classes use hardcoded colors that do not adapt when switching themes. We need to audit and standardise theme styles across all major pages.

Technical Scope & Steps

1. Standardize colors in global CSS (src/app/globals.css) using CSS variables for key colors (--background, --foreground, --primary, etc.).
2. Audit sidebar, cards, and modal components to replace hardcoded colors (like bg-zinc-900) with variable classes or clean utility classes (bg-background text-foreground).
3. Standardize hover states for all buttons to match light and dark modes.

Acceptance Criteria

• Toggling theme switches the entire application context immediately.
• Text contrast remains fully readable under both light and dark themes.

[ebubeb683-ship-it]

I have gone through the issue details and already have an approach in mind. I would appreciate being assigned to this task.

[dotunv]

Hello maintainer, I have experience to work on this issue

[grantfox-oss]

🦊 GrantFox — @dotunv has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #442)
2. Your PR will be reviewed by the LightForgeHub maintainers

Good luck! Track your progress on GrantFox.