Tailwind CSS Theme Switcher for Next.js

A simple Tailwind CSS theme switcher template for Next.js projects, enabling quick and easy implementation of light and dark mode switching.

Features

• 🌓 Theme Switching: Toggle between light and dark themes with ease.
• ⚡ Tailwind CSS: Styled with Tailwind CSS for rapid development.
• 🚀 Next.js: Built with Next.js for optimal performance and developer experience.
• 💻 Responsive: Fully responsive design, works seamlessly across all devices.

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v12 or later)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/DajkaCsaba/tailwind-theme-switcher.git
   cd tailwind-theme-switcher
   

2. Install dependecies:

   corepack pnpm install 
   

3. Run the development server:

   corepack pnpm run dev 
   

   Open http://localhost:3000 in your browser to see the result.

Usage

• The theme switcher component is located in components/ThemeSwitcher.js.
• The default theme is light. Click the switcher button to toggle between light and dark modes.
• Tailwind's utility classes have been extended to support custom theming. You can adjust colors and styles in the tailwind.config.js file.