Theme Switcher

The Theme Switcher component allows users to switch between light and dark themes in your application. It uses the next-themes package to handle theme switching and provides a seamless user experience.

You can find the Theme Switcher component in src/components/SelectTheme.tsx.

How it works

The Theme Switcher component utilizes the useTheme hook from the next-themes package to retrieve the current theme and the setTheme function to switch between themes. When the button is clicked, it toggles between the light and dark themes by setting the theme to the opposite of the current theme.

The component displays a button with two icons:

A sun icon (☀️) representing the light theme
A moon icon (🌙) representing the dark theme

The icons are conditionally rendered based on the current theme, with smooth transitions between them.

Usage

To use the Theme Switcher component in your application, follow these steps:

Wrap the layout component with Theme Provider (You can change the default mode to light or systemt theme as well):
```
<ThemeProvider defaultTheme="dark">
  // ...
  {children}
  // ...
</ThemeProvider>
```

Import the SelectTheme component in the desired location:

import { SelectTheme } from "@/components/SelectTheme";

Render the SelectTheme component in your JSX:
```
<SelectTheme />
```
The component will automatically handle theme switching and display the appropriate icon based on the current theme.

By incorporating the Theme Switcher component into your application, you provide users with the flexibility to choose between light and dark themes, enhancing their browsing experience and accessibility.

Submit Button AI Modules