[Enhancement] Add dark/light/system mode toggle in NavBar

[SATYAM-PRATIBHAN]

📌 Description

The app uses next-themes (already in package.json) for theming, but there's no UI to switch between dark and light mode. Users are stuck in whatever the default theme is.

🎯 Goal

Add a theme toggle (Dark / Light / System) in app/(protected)/profile/ and optionally in the sidebar.

📋 Acceptance Criteria

• Theme toggle (switch or dropdown) added to navbar.
• Supports: Dark, Light, and System modes
• Selected preference persists across sessions (handled by next-themes automatically)
• Toggle is accessible.
• Visually consistent with existing UI

💡 Hints

• Use useTheme() from next-themes to get and set the current theme
• ThemeProvider is likely already wrapping the app in app/layout.tsx
• Radix UI Switch is available at /components/ui/switch.tsx
• Radix UI DropdownMenu is also available for a 3-way selector

[zainabfatima097]

Hi @SATYAM-PRATIBHAN
I'd like to work on this issue.
Please assign it to me under GSSoC 2026

[SATYAM-PRATIBHAN]

Hi @SATYAM-PRATIBHAN I'd like to work on this issue. Please assign it to me under GSSoC 2026

I will assign it to you; just make sure to open the pr on the 15th.

[zainabfatima097]

okay, will work on it.

[ARYAN-MISHRA-2006]

Hii @SATYAM-PRATIBHAN ,

I’m also interested in contributing to this issue under GSSoC'26. I have been exploring the project structure and I’m comfortable working with React/frontend components. If collaboration or multiple contributors are allowed, I would love to work on this feature as well.

I can help with:

• implementing the theme toggle UI
• improving accessibility/keyboard navigation
• ensuring UI consistency across pages

Please consider assigning this issue to me too if possible. Thank you!

[zainabfatima097]

@SATYAM-PRATIBHAN
Completed the work. Please review it. Will create the PR at May 15 if no issues are found.
https://drive.google.com/file/d/1CIEAqna44b49x4EWjq1Q7GocI2ilcleB/view?usp=drivesdk

[SATYAM-PRATIBHAN]

@SATYAM-PRATIBHAN Completed the work. Please review it. Will create the PR at May 15 if no issues are found. https://drive.google.com/file/d/1CIEAqna44b49x4EWjq1Q7GocI2ilcleB/view?usp=drivesdk

Kudos to you for effort, but the color scheme doesn't really match the aesthetics. Try achieving something similar to the below image if you can (ignore the Product Hunt badge):

[zainabfatima097]

okay, will work on it!

[zainabfatima097]

Hi, @SATYAM-PRATIBHAN

the core theme switching is working, the navbar toggle is in place.
But I've hit a few tricky spots I wanted to be transparent about:

• The hero image and some feature card images are light-themed .webp screenshots, so they don't naturally adapt to dark mode. CSS overlays either hide the content or make things look off. The cleanest fix would be dark-themed versions of those assets.

• Some feature cards were using hardcoded bg-white instead of theme-aware variables, which I've partially addressed, but a full audit of the component tree would help.

• The Product Hunt badge is an external SVG embed that doesn't respond to CSS theming cleanly.

This is the best I could get it to without replacing the static assets. Happy to keep iterating if you can point me to the right files, or if dark versions of the images are available!

Let me know how you'd like to proceed.

https://drive.google.com/file/d/14O_b6syEmE6mRJMfwLQFPRZwJ_ucMpWg/view?usp=drivesdk

[SATYAM-PRATIBHAN]

Your doubts

• So for those images, just leave them; I'll handle those.
• Well, for just wanting to complete the dark mode of the upper links like Home, About, and all, if the trial dark mode looks cool, we'll implement it to the whole web pages; just want a starting good design.
• I told you to ignore it so no changes there

Some design changes:

• Ignore the product hunt badge.
• Don't want that upper glow from the top.
• The hero image glow is a bit off-flow; make it a little brighter to a softer transitional tone.
• Navbar white outline.
• The button design should be.
• And use this for the hero image alternative for dark mode (Take an ss of the inner content, not the whole thing), and make sure the design flow for the hero looks identical to this; no need for masking those outer squares if it proves hard for you.