I'll implement a dark mode toggle for a Next.js application using CSS variables and React context. This approach will allow for easy theming and ensure that the dark mode preference persists across page reloads.

Let's start by creating the necessary components and context:

This implementation creates a dark mode toggle for a Next.js application using CSS variables and React context. Here's a breakdown of what we've done:

1. We created a ThemeContext that manages the current theme state and provides a toggleTheme function.
2. The ThemeProvider component wraps our application and handles the theme state, including persisting the theme preference in local storage and applying the appropriate class to the html element.
3. We implemented a ThemeToggle component that uses the useTheme hook to access and toggle the current theme.
4. We defined CSS variables for both light and dark themes in the globals.css file, which will be applied based on the presence of the dark class on the html element.
5. We updated the root layout to wrap the entire application with the ThemeProvider.
6. Finally, we created a simple home page that demonstrates the use of the ThemeToggle component.

This implementation ensures that:

• The theme preference persists across page reloads by using local storage.
• The initial theme is set based on the user's system preference if no preference has been saved.
• The theme can be easily toggled using the ThemeToggle component.
• The application's styles will automatically update when the theme changes, thanks to the CSS variables.

You can now use the useTheme hook in any component to access the current theme or toggle it, and your styles will automatically adapt to the current theme using the CSS variables we've defined.