Skip to content

[Feature]: Add Dark/Light mode toggle preview on the landing page #38

@Nagajyothi-tammisetti

Description

@Nagajyothi-tammisetti

🧩 Problem

Currently, users have to manually edit the URL parameters (bg, accent, text)
to preview how their card looks in different themes. There is no interactive way to
compare themes side-by-side or toggle between light and dark variants before copying
the embed URL.

This creates friction, especially for new users who don't know which theme suits their
profile README.

✅ Proposed Solution

Add an interactive theme preview section to the landing page where users can:

  • Click through available themes (dark, neon, dracula, github, light)
  • See their card update live without editing the URL manually
  • Copy the final embed URL with one click once they've chosen a theme

📋 Acceptance Criteria

  • A theme switcher UI is added to the landing/demo page
  • Clicking a theme updates the preview card in real time
  • At least all 5 existing presets (dark, neon, dracula, github, light) are supported
  • A "Copy embed URL" button copies the correct URL with the selected theme
  • UI is mobile responsive

💡 Why This Matters

CommitPulse's biggest strength is its visual customization. Making that customization
discoverable and interactive directly improves the user experience and increases
adoption — users are more likely to embed the card if they can see it live.

🏷️ Labels

enhancement · good first issue · level 1 · NSoC'26

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions