Skip to content

feat: migration to Next.js & add dark mode (Fixes #3075)#54

Open
MIHIR2006 wants to merge 2 commits intokeploy:mainfrom
MIHIR2006:feat/migrate-nextjs-dark-mode
Open

feat: migration to Next.js & add dark mode (Fixes #3075)#54
MIHIR2006 wants to merge 2 commits intokeploy:mainfrom
MIHIR2006:feat/migrate-nextjs-dark-mode

Conversation

@MIHIR2006
Copy link

@MIHIR2006 MIHIR2006 commented Jan 29, 2026

FIXES: keploy/keploy#3075

Description

This PR addresses Issue #3075 by migrating the legacy static HTML/CSS codebase to a modern Next.js (App Router) architecture. This migration was necessary to implement the requested Dark/Light mode functionality, which requires state management and dynamic class switching.

Key Changes:

  • Architecture Migration: Ported the entire site from static HTML/CSS to Next.js 16 with TypeScript and Tailwind CSS.
  • Dark Mode Implementation: Integrated next-themes to handle theme switching and persistence (local storage) without hydration mismatches.
  • UI Modernization: Refactored navigation and content sections into reusable React components, improving maintainability and responsiveness.
  • Build System: Configured next.config.js for static export (output: 'export') to ensure compatibility with GitHub Pages deployment.

Fixes #3075

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

I have performed manual verification of the migration and the new features:

  1. Theme Toggle: Verified that clicking the sun/moon icon in the Navbar correctly toggles the dark class on the <html> element and persists preference after page reload.
  2. Responsive Design: Tested the layout on desktop (1920px) and mobile (375px) viewports to ensure no visual regressions compared to the original design.
  3. Build Check: Ran npm run build locally to confirm that the static export generates successfully without errors.
  4. Linting: Ran npm run lint to ensure code quality standards are met.

Test Configuration:

  • OS: Windows 11 / Node v20
  • Browser: Chrome Latest

Additional Context

Light Mode:

Screenshot 2026-01-30 010434

Dark Mode:
Screenshot 2026-01-30 011129

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings
  • I have tagged the reviewers in a comment below incase my pull request is ready for a review
  • I have signed the commit message to agree to Developer Certificate of Origin (DCO) (to certify that you wrote or otherwise have the right to submit your contribution to the project.) by adding "--signoff" to my git commit command.

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you and congratulations 🎉 for opening your very first pull request in writers-program

Signed-off-by: MIHIR2006 <mihirgoswami2006@gmail.com>
@MIHIR2006
Copy link
Author

recheck

Signed-off-by: MIHIR2006 <mihirgoswami2006@gmail.com>
@MIHIR2006 MIHIR2006 force-pushed the feat/migrate-nextjs-dark-mode branch from 812e3cd to 5ba37d1 Compare January 30, 2026 17:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[writers-program] Add Dark/Light Mode Support with Toggle

1 participant