[BUG] ThemeToggle always shows Sun icon and causes hydration error during SSR

[srijanravisankar]

Platform

Windows 11

Browser

Brave

Current Behavior

• Bug 1: The ThemeToggle component always displays the Sun icon, even when the app is in dark mode, so users never see the Moon icon.
• Bug 2: Additionally, it triggers a hydration error in the console because useTheme() from next-themes returns different values on the server and client.

Expected Behavior

• Fix 1: The component should correctly display the Sun icon in dark mode and the Moon icon in light mode.
• Fix 2: The theme toggle should not cause any hydration errors when switching between modes or when rendering on the client.

Recurrence Probability

Always

Steps To Reproduce

1. Pull and run the latest main branch.
2. Navigate to a page that includes the ThemeToggle component.
3. Switch between dark and light themes.
4. Observe:
   • The icon never changes (always Sun).
   • The browser console logs a hydration mismatch error.

Anything else?

In light theme:

In dark theme:

Hydration Error:

[srijanravisankar]

I’ll open a pull request for this and would appreciate it if you could assign this issue to me. Thank you!