Feature: Dark/Light mode — Phase 2 full app migration

[Venkat-Kolasani]

Description

Follow-up to #45 (Phase 1: theme infrastructure + core layout). After Phase 1 lands, migrate the remaining application surfaces to use semantic theme tokens so every page and component renders correctly in both light and dark modes.

Depends on: #45 (Phase 1 must be merged first)

Scope

• Migrate remaining ~40 page/component files that hardcode dark-only classes (bg-black, text-white, bg-[#0A0A0A], etc.)
• Update src/pages/Calendar.css for light/dark calendar styling
• Theme Recharts/Analytics chart axis, grid, and label colors dynamically
• Clerk appearance props in auth UI (Navbar, sign-in flows) for both themes
• PublicSharePage — shared public views readable in both themes
• PWA theme-color / manifest.json background updates when theme changes (optional but recommended)
• Smoke-test all main routes: Dashboard, Documents, Profile, Calendar, Status Board, Reports, Analytics, Hackathons, Interview Prep, modals, forms, dropdowns, toasts

Technical notes

• Reuse Phase 1 tokens from src/index.css and ThemeProvider — do not introduce a second theme system
• Grep audit: bg-black|text-white in src/ (~50 files total; Phase 1 covers core shell + shared primitives)
• Stack: CRA + React 19 + Tailwind 3 (darkMode: 'class')

Contribution

Comment with your planned approach before requesting assignment. GSSoC 2026 contributors welcome.

[Venkat-Kolasani]

Maintainer note: This issue is open and intentionally unassigned until a contributor comments with their planned approach (per CONTRIBUTING.md).

Blocked on: #45 (Phase 1) must merge first.

If you want to work on Phase 2 under GSSoC 2026, comment here with your approach and files you expect to touch. @Dev1822 — you were invited from #45; feel free to claim this once Phase 1 is in progress or merged.

[Dev1822]

Hi @Venkat-Kolasani, thanks for the invitation! I would love to claim Phase 2. Here is my planned approach for the full migration once Phase 1 is merged:

1. Grep Audit & Tailwind Migration

I'll run a project-wide search for hardcoded dark classes (bg-black, text-white, bg-[#0a0a0a], text-gray-400, etc.) across the ~40 files in src/.
I will replace these with responsive Tailwind classes utilizing the dark: variant (e.g., bg-white dark:bg-black, text-gray-900 dark:text-white) so they seamlessly integrate with Phase 1's ThemeProvider.
2. Calendar.css

I'll update the custom CSS to leverage the CSS variables introduced in Phase 1, or use Tailwind's @apply with dark: modifiers for calendar cells, borders, and event backgrounds to ensure it looks great in both modes.
3. Recharts/Analytics

Since SVG charts don't always inherit CSS classes perfectly, I will tap into the ThemeProvider context (e.g., const { isDark } = useTheme()) to dynamically pass hex color values to Recharts' axis, grid, and label props.
4. Clerk Authentication UI

I'll use Clerk's appearance prop. By reading the active theme state, I can dynamically apply Clerk's predefined themes (e.g., importing dark from @clerk/themes) so the sign-in/user-profile modals match the app's current mode.
5. PublicSharePage

I'll ensure this standalone page utilizes the same semantic tokens so external viewers get the correct light/dark experience (defaulting to their OS preference).
6. PWA theme-color

I will add a useEffect hook (likely inside the ThemeProvider) that dynamically updates the tag in the document whenever the theme state changes, ensuring mobile browser top-bars match the app's background.
Files I expect to touch:

src/pages/* and src/components/* (The ~40 files identified in the audit).
src/pages/Calendar.css.
src/pages/Analytics.jsx (and any Recharts wrapper components).
src/components/common/Navbar.jsx / App.js (wherever Clerk UI is initialized).
src/context/ThemeContext.jsx (to add the meta theme-color updater).
Let me know if this looks good to you, and I'll wait for Phase 1 to merge before starting!

[Venkat-Kolasani]

done @Dev1822 . Kindly keep a eye on status of phase 1 and start working post it is merged.thank you for your interest into FutureStack.

Do Star the Repo.Thank You