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

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:

Start at the ThemeToggle component and inspect its useTheme() usage and server/client rendering path. Reproduce the issue on a page that includes ThemeToggle, then verify that the icon reflects the active theme and the console reports no hydration mismatch when switching modes. The issue names no file or test, so locate the component and relevant test entry point first.