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.
I've created a complete theme toggle solution for your Greater Analytics landing page:
next-themes library, which handles theme persistence and system preference detection.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:
npm install next-themes
# or
yarn add next-themes
# or
pnpm add next-themesThis implementation follows best practices for theme switching in Next.js, including handling hydration mismatches and providing accessibility features like screen reader text.