I see the issue! The theme toggle isn't working properly because we need to add the next-themes package and fix the theme switching logic. Let me fix this:

The main issues were:

1. Hydration Mismatch: The theme toggle needs to handle server-side rendering properly by checking if the component is mounted
2. Theme State: Added proper state management to track the current theme
3. HTML Attribute: Added suppressHydrationWarning to the HTML element to prevent hydration warnings
4. Icon Sizing: Fixed the icon sizes to be more consistent

Now the dark mode toggle should work properly! You should be able to:

• Click the sun/moon icon in the sidebar footer
• Select Light, Dark, or System from the dropdown
• See the theme change immediately
• Have your preference persist across page reloads

The toggle will show a sun icon in light mode and a moon icon in dark mode, with smooth transitions between the two states.

I see the issue! The problem is that next-themes isn't actually installed in the Next.js environment. Let me create a custom theme implementation that will work properly:

Now I've created a custom theme implementation that will work properly in the Next.js environment! Here's what I fixed:

Key Changes:

1. Custom Theme Provider: Built a custom theme context that doesn't rely on external packages
2. Local Storage Persistence: Themes are saved and restored from localStorage
3. System Theme Detection: Automatically detects and follows system preferences
4. Proper Hydration: Handles server-side rendering correctly
5. Real-time Updates: Listens for system theme changes when "system" is selected

Features:

• Light Mode: Clean, bright interface
• Dark Mode: Dark theme using the CSS variables in globals.css
• System Mode: Automatically follows your OS preference
• Persistence: Your choice is saved and restored on page reload
• Icons: Shows sun for light mode, moon for dark mode
• Dropdown Menu: Clean interface with icons for each option

The theme toggle should now work perfectly! Try clicking the sun/moon icon in the sidebar footer and selecting different theme options. The changes should be immediate and persistent across page reloads.