Shadcn Custom Theme

Generate Custom shadcn/ui Themes Instantly with Tailwind CSS

This command-line tool empowers developers to swiftly generate personalized themes for shadcn/ui, mirroring the customization capabilities of the official themes website. By specifying primary, secondary, accent, and gray colors using standard Tailwind color names, users can produce a set of CSS variables. These variables can then be directly integrated into their global.css file, enabling easy application of the custom theme across their project, supporting both light and dark modes.

Features:

• Theme Generation: Creates custom themes analogous to official shadcn/ui themes by outputting CSS variables.
• Color Customization: Allows specification of primary, secondary, accent, and gray colors for the theme.
• Tailwind Color Integration: Utilizes default Tailwind CSS color names (e.g., red, green, blue) for theme definition.
• Required Primary Color: Mandates a primary color for theme generation, with other customizable colors defaulting to Tailwind gray if not specified.
• CLI Usage: Operates via npx for easy execution (e.g., npx shadcn-custom-theme primary=COLOR ...) using command-line arguments.
• CSS Variable Output: Generates CSS custom properties ready to be pasted directly into your project's global.css file.
• Custom Template Support: Accepts a user-defined TEMPLATE.json file to override default color mappings for the CSS variables.
• Dynamic Color Replacement: CLI arguments for primary, secondary, accent, and gray colors dynamically replace correspondingly prefixed color placeholders (e.g., primary-600) in the template.
• Static Color Preservation: Colors in the template that are not prefixed (e.g., 'red-500' for the destructive variable) are used directly without modification by CLI arguments.
• Light and Dark Mode Support: Outputs CSS variables structured for both light and dark theme modes automatically, as seen in the provided CSS structure.
• Comprehensive CSS Variable Set: Defines a wide array of theme variables, including those for background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, and radius.

Summary:

shadcn-custom-theme is a developer-focused CLI tool designed to streamline the creation of personalized shadcn/ui themes. By leveraging Tailwind CSS color names, it generates the necessary CSS variables for primary, secondary, accent, and gray color palettes, along with support for custom templates and both light and dark modes. This allows for quick and easy theme integration into any project using shadcn/ui components, enhancing visual consistency and developer workflow.