keploy
[devrel-program] Add Dark/Light Mode Support with Toggle (DevRel Website)
(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.
could you assign it to me ....would like to sharpen my skills ..... @amaan-bhati
Hi @amaan-bhati 👋, I’d like to take up this issue (preferably after #3065 is resolved).
Proposed Approach:
- Implement dark/light mode using Tailwind CSS
dark:variants. - Add a theme toggle (in Navbar) with shadcn/ui or Radix UI for accessibility.
- Persist theme preference across sessions via
next-themesor localStorage. - Respect system preference (
prefers-color-scheme). - Ensure all pages and components (Navbar, footer, modals, cards) adapt consistently.
- Follow Keploy’s branding with proper contrast for readability.
This will bring accessibility improvements and align the DevRel Program website with modern UI standards.
Could you please assign this to me? 🙌
@amaan-bhati
I migrated the site to Next.js 15 + TypeScript, implemented light/dark mode, improved SEO, and reorganized the folder structure to Next.js conventions. This PR fixes the related issues:
- https://github.com/keploy/keploy/issues/3065
- https://github.com/keploy/keploy/issues/3080
- https://github.com/keploy/keploy/issues/3078
- https://github.com/keploy/keploy/issues/3068
- Demo: https://devrel-program-shardendu-mishra.vercel.app
PR: https://github.com/keploy/devrel-program/pull/41
Verified npm run dev, npm run build, npm run start and visual parity with the original site. Please review and merge on the “first and best PR” basis you mentioned.
Please check it once bhaiya I have followed all the things mentioned in the respective issues by you.
Hi @amaan-bhati 👋, My name is abhinav I’d like to take up this issue (preferably after https://github.com/keploy/keploy/issues/3065 is resolved).
Proposed Approach:
Implement dark/light mode using Tailwind CSS dark: variants. Add a theme toggle (in Navbar) with shadcn/ui or Radix UI for accessibility. Persist theme preference across sessions via next-themes or localStorage. Respect system preference (prefers-color-scheme). Ensure all pages and components (Navbar, footer, modals, cards) adapt consistently. Follow Keploy’s branding with proper contrast for readability. This will bring accessibility improvements and align the DevRel Program website with modern UI standards. Could you please assign this to me? 🙌
