The light/dark mode toggle is behaving strangely when the page is reloaded

[Zahnentferner]

How to reproduce the issue:

• Activate light mode, ensuring that the toggle shows a sun.
• Reload the page.

The page will reload and will continue in light mode, but the light/dark toggle will show a moon instead of the sun.

[CodeAXwOrlD]

i am solving this issue

[pranjal29092005]

Hi! 👋

We're Team Dev Engers participating in the Unstoppable Hackathon LNMIIT 2025, and we've fixed the theme toggle icon synchronization issue as part of our contribution.

Team Members:

• Pushkar Modi
• Parth Raninga
• Pranjal Yadav(@pranjal29092005)

compressed_Screen.Recording.2025-12-13.223816.mp4

This PR fixes the theme toggle icon not syncing with the stored theme preference after page reload. The icon now correctly reflects whether the user is in light mode (sun) or dark mode (moon) even after reloading the page.

Changes:

• Modified components/toggle-theme.tsx placeholder state
• Changed Sun icon from opacity-100 to opacity-0 during hydration
• Prevents icon mismatch by using neutral state until theme is loaded

Looking forward to your feedback! 🚀

Fixes #5