I'll create a theme toggle component that switches between dark and light modes, using your purple accent color (#a855f7). The toggle will apply the theme across all pages by managing the "dark" class on the document element.

How It Works

I've created a complete theme toggle solution for your Greater Analytics landing page:

1. Theme Toggle Component: A dropdown menu with sun/moon icons that allows users to switch between light, dark, and system themes.
2. Theme Provider: Wraps your application to provide theme context using the next-themes library, which handles theme persistence and system preference detection.
3. Root Layout Update: Added the ThemeProvider to your root layout to ensure theme changes apply to all pages.
4. Uncommented Code: Activated the previously commented-out ThemeToggle component in your header.

The toggle uses your purple accent color (#a855f7) on hover and smoothly transitions between sun and moon icons based on the current theme. The theme will persist across page refreshes and navigation.

To install this in your project, you'll need to add the next-themes package:

This implementation follows best practices for theme switching in Next.js, including handling hydration mismatches and providing accessibility features like screen reader text.