Overview
The shadcn-custom-theme tool generates a custom theme similar to the ones created by the shadcn/ui Themes website. It allows users to specify primary, secondary, accent, and gray colors for their theme. The primary color is required, while the rest default to Tailwind gray. By using this tool, users can generate CSS variables that can be inserted into their global.css file.
Features
- Custom Theme Generation: Users can generate a custom theme with specified primary, secondary, accent, and gray colors.
- Color Specification: Colors can be specified using default Tailwind color names, such as red, green, blue, indigo, etc.
- Template Customization: Users can provide a TEMPLATE.json file to override the default theme template.
Installation
To install and use the shadcn-custom-theme tool, follow these steps:
- Open your command line interface.
- Run the following command:
npx shadcn-custom-theme primary=COLOR [secondary=COLOR] [accent=COLOR] [gray=color] [template=TEMPLATE.json] - Replace
COLORwith the desired colors for primary, secondary, accent, and gray. If no colors are specified for secondary, accent, and gray, they will default to Tailwind gray. - Optionally, if you want to use a custom template, provide a
TEMPLATE.jsonfile with the desired color values. - The tool will output the CSS variables that you can copy and paste into your
global.cssfile.
Summary
The shadcn-custom-theme tool allows users to generate custom themes for their websites, similar to the ones created by the shadcn/ui Themes website. Users can specify primary, secondary, accent, and gray colors, and the tool will output the necessary CSS variables for the theme. It also provides the option to customize the theme template by providing a TEMPLATE.json file. Overall, this tool offers a convenient way to generate personalized themes for websites.