[FEATURE] Implement Dark/Light Theme Toggle on Landing Page
- Dominant language
- JavaScript
- Stars
- 39.5k
- Forks
- 3.2k
- Avg merge
- 10h 46m
- Merged PRs (30d)
- 16
Description
The current Landing Page doesn’t support a dark/light theme toggle.
To improve accessibility and user experience, we should add a theme switcher that allows users to switch between Light and Dark modes — without altering the existing layout, animations, or design flow.
## Requirements
- Implement a theme toggle button in the Navbar or top-right corner.
- Use Tailwind’s dark: variants for styling (e.g., dark:bg-gray-900, dark:text-white).
- Maintain existing structure and GSAP/Framer animations — no layout or design refactors.
- Store user preference in localStorage, and sync with the system color scheme if possible (prefers-color-scheme).
- Apply theme context globally (e.g., ThemeContext or simple React state).
- Ensure all text, backgrounds, and buttons have sufficient contrast in both themes.
## Implementation Notes
- Update tailwind.config.js → darkMode: "class".
- Add a new file: src/context/ThemeContext.jsx for managing theme state.
- Optional: Add src/components/ThemeToggle.jsx for the toggle UI.
- Test theme switching on the Landing Page only (initial rollout).
Contributor guide
Assessment
This issue has not been assessed yet.