Overview

Theme Wizard is an interactive design tool built with Next.js 13 that allows designers and developers to easily discover and fine-tune themes for their projects. It offers a simple and intuitive interface for customizing colors, fonts, and visual styles, catering to users working with Tailwind CSS or Shadcn/UI apps.

Features

• Effortless Color Customization: Choose and tweak colors easily with options like color picker, eyedropper, hex input, or suggested colors.
• Color Scheme Randomization: Instantly generate fresh color palettes based on preferences for easy experimentation.
• Intuitive Mode Switching: Seamless toggling between light and dark modes to find the perfect visual style.
• Undo and Redo: Maintain control over design by reverting to previous states or comparing changes.
• Element-Specific Color Adjustment: Fine-tune specific element colors by clicking on them for distinct color options.
• Color Locking: Lock preferred colors and randomize the rest for consistent design.
• Advanced Font Selection: Customize typography using Google Fonts and get inspiration with a Random button.
• Border Radius Customization: Adjust border radius for achieving perfect element shapes.
• Effortless Export: Export CSS with a single click for easy integration into projects.

Installation

1. Clone the repository: git clone https://github.com/fozuzip/theme-wizard.git
2. Install dependencies: npm install
3. Create a .env.local file in the project’s root directory.
4. In the .env.local file, set the NEXT_PUBLIC_FONTS_API_KEY variable with a valid Google Fonts API key. Example: NEXT_PUBLIC_FONTS_API_KEY=your-google-fonts-api-key.
   • Obtain a Google Fonts API key by following Google’s API key creation instructions.
5. Run the development server: npm run dev
6. Open your browser and visit http://localhost:3000 to start using Theme Wizard.

Summary

Theme Wizard is a comprehensive design tool that simplifies the process of theme customization for designers and developers. With features like color customization, mode switching, font selection, and easy export functionality, it offers a user-friendly experience for creating visually appealing themes for projects. The tool’s integration with Next.js 13 provides a modern development environment, making it a valuable resource for those working on Tailwind CSS or Shadcn/UI apps.