Themeify

Themeify is a CLI tool designed to effortlessly apply themes to React and Next.js projects. With support for popular UI frameworks like MUI, Tailwind, ShadCN, and Bootstrap, Themeify ensures your projects always look stunning and cohesive.

Installation

Install the package globally using npm, yarn, or npx:

Using npm

npm install -g themeify

Using yarn

yarn global add themeify

Using npx (no installation required)

npx themeify

Example Usage

Applying a custom theme to a React project using Tailwind CSS:

themeify apply --path ./my-react-app --framework Tailwind --theme vibrantPastel --palette vibrant --font Poppins

Run the tool interactively for a guided setup:

themeify apply

During the interactive prompt, you will be able to choose the framework, theme (which can be chosen as "None"). If the theme is "None," you can then select the palette and font to generate the CSS or JS theme configuration files.

Note: If no options are provided to the apply command, the tool will prompt you to choose from all the options. However, providing options to the apply command will take precedence over the prompts.

Features

• Apply Themes: Quickly apply predefined or custom themes to your React and Next.js projects.

• Preview Themes: Preview themes using a specified color palette or theme to see how it looks before applying.

• List Palettes and Themes: List all available palettes and themes for easy selection.

• Cleanup: Remove generated files to keep your project directory clean and organized.

Usage

General Commands

• Apply Theme

themeify apply --path <path> --framework <framework> --theme <theme> --palette <palette> --font <font>

Options:

• --path <path>: Path to your project (default: current working directory).

• --framework <framework>: UI framework (e.g., MUI, Tailwind, ShadCN, Bootstrap).

• --theme <theme>: Theme name.

• --palette <palette>: Color palette name.

• --font <font>: Font name.

Interactive mode (no options):

themeify apply

• Preview Theme

themeify preview --paletteName <name> --themeName <name>

Options:

• -p, --paletteName <name>: Palette name.

• -t, --themeName <name>: Theme name.

• -l, --list: List all palettes and themes.

• Note: Only one option, either paletteName or themeName, can be provided individually. You cannot use both options together. If provided together themeName will take precedence

• List Palettes and Themes

themeify preview --list

• Cleanup

themeify cleanup --directory <path>

Options:

• --directory <path>: Directory to clean up.

Motivation

The motivation behind Themeify is to simplify the process of applying and managing themes in React and Next.js projects. Designing a cohesive and visually appealing UI can be time-consuming, and this tool aims to streamline that process, enabling developers to focus more on building features rather than tweaking styles.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you encounter any issues or have suggestions for improvements, please report them on the GitHub Issues page. Your feedback is invaluable in helping improve Themeify.

Hire Me

If you like my work and want to collaborate or have any projects in mind, feel free to reach out!

LinkedIn Profile

License

This project is licensed under the MIT License. See the LICENSE file for details.