[devrel-program] Add Dark/Light Mode Support with Toggle (DevRel Website)
- Dominant language
- Go
- Stars
- 18.5k
- Forks
- 2.4k
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 101
Description
(preferably after #3065 is resolved)
The DevRel Program website (devrel.keploy.io) currently does not support a dark/light mode, which is now a standard expectation for accessibility and modern web experiences. Implementing a theme toggle will improve usability, especially for users who prefer dark interfaces, and align the site with Keploy’s branding consistency.
**Expectations & Considerations:**
- Implement dark/light mode using Tailwind CSS dark variants (dark: utilities).
- Add a theme toggle button (preferably in the Navbar for easy access).
- Ensure the theme persists across sessions (e.g., localStorage or next-themes).
- Integrate UI libraries (shadcn/ui, Radix UI, Magic UI, etc.) for a clean and accessible toggle component.
- Ensure both modes follow Keploy’s design language while maintaining contrast ratios for readability.
- Apply theme compatibility across all pages and sections (home, program details, components like modals/footers).
- Respect user’s system preference (prefers-color-scheme).
**Acceptance Criteria:**
- Toggle button is accessible and works across all devices.
- Dark and light modes apply consistently across all pages and components.
- Theme preference persists after page reloads and navigation.
- Navbar, footer, modals, and other UI components adapt correctly in both themes.
**Links:**
- DevRel Program Website: https://devrel.keploy.io/
- Tailwind Dark Mode Docs: https://tailwindcss.com/docs/dark-mode
- Example UI Component: https://ui.shadcn.com/docs/components/switch
**Notes:**
- Ensure that the global layout (layout.tsx) handles theme switching cleanly.
- Reusable components (buttons, cards, headings) should support both light and dark variants.
- Toggle should feel consistent with the Keploy main website experience.
Contributor guide
Research direction
Start by locating the DevRel website entry point and reading the global layout.tsx, then inspect the Navbar and shared components named in the issue. Open the home, program details, footer, and modal views to identify theme coverage; done means an accessible toggle, system preference support, persistent selection, and consistent readable styling in both modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- accessibility, design, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100