Dark Mode Toggle Switcher

Mark Sikaundi

August 24, 2024

Create a Dark Mode Toggle using React and Tailwind CSS. This dark mode toggle should allow users to switch between light and dark mode on a website. The dark mode toggle should include the following features:

This Dark Mode Toggle includes the following features:

• A toggle switch to switch between light and dark mode
• Dark mode should be activated when the toggle is switched on
• Light mode should be activated when the toggle is switched off
• The toggle switch should have a smooth transition between light and dark mode when toggled on and off

Dark Mode Toggle Example

Light Mode Toggle Example

The Dark Mode Toggle component should do the following:

• It uses the `useTheme` hook from `next-themes` to manage the theme state.
• The toggle is implemented as a dropdown menu with options for Light, Dark, and System themes.
• The button displays a sun icon in light mode and a moon icon in dark mode, with a smooth transition between them.
• It uses the `Button` and `DropdownMenu` components from shadcn/ui for consistent styling.
• The component is accessible, with appropriate aria labels and keyboard navigation support

Fell free to useTheme hook from next-themes

You can use the useTheme hook from next-themes to manage the theme state. The useTheme hook provides a theme object with the following properties:

Note:

The component should use Tailwind CSS for styling, making it easy to customize colors, spacing, and other design aspects. You can use the Tailwind CSS CDN to include Tailwind CSS in your project. You can also use the Tailwind CSS CLI to generate a Tailwind CSS configuration file and customize the default theme.