keploy / keploy/keploy

[devrel-program] Add Dark/Light Mode Support with Toggle (DevRel Website)

Open
#3,078 5 comments 0 reactions 0 assignees View on GitHub
Good First Issue HACKTOBERFEST HACKTOBERFEST2025 nextjs OSS
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.