https://github.com/kiliman/shadcn-custom-theme
This tool generate a custom theme similar to the ones created by the [shadcn/ui Themes website](https://ui.shadcn.com/themes). You can specify the primary, secondary, accent, and gray colors. The color name should be one of the default Tailwind color names (e.g. red, green, blue, indigo, etc.)
https://github.com/kiliman/shadcn-custom-theme
Last synced: 7 months ago
JSON representation
This tool generate a custom theme similar to the ones created by the [shadcn/ui Themes website](https://ui.shadcn.com/themes). You can specify the primary, secondary, accent, and gray colors. The color name should be one of the default Tailwind color names (e.g. red, green, blue, indigo, etc.)
- Host: GitHub
- URL: https://github.com/kiliman/shadcn-custom-theme
- Owner: kiliman
- Created: 2023-08-08T19:14:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-09T15:12:09.000Z (over 2 years ago)
- Last Synced: 2024-12-08T20:49:17.035Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 515 KB
- Stars: 134
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-shadcnui - Github
README
# shadcn-custom-theme
This tool generate a custom theme similar to the ones created by the [shadcn/ui Themes website](https://ui.shadcn.com/themes).
You can specify the primary, secondary, accent, and gray colors. The color name should be one
of the default Tailwind color names (e.g. red, green, blue, indigo, etc.) The `primary` color is
required, the rest defaults to Tailwind `gray`.
## Usage
`npx shadcn-custom-theme primary=COLOR [secondary=COLOR] [accent=COLOR] [gray=color] [template=TEMPLATE.json]`
This will output the CSS variables that you can paste into your `global.css`.
You can also specify a `TEMPLATE.json` file which has the default colors. [See below for example](#templatejson).
For example
```bash
npx shadcn-custom-theme primary=orange secondary=green accent=pink gray=neutral
```
Will output the following:
```css
@layer base {
:root {
--background: 0 0% 100% /* white */;
--foreground: 0 0% 4% /* neutral-950 */;
--card: 0 0% 100% /* white */;
--card-foreground: 0 0% 4% /* neutral-950 */;
--popover: 0 0% 100% /* white */;
--popover-foreground: 0 0% 4% /* neutral-950 */;
--primary: 21 91% 49% /* orange-600 */;
--primary-foreground: 34 100% 97% /* orange-50 */;
--secondary: 141 85% 93% /* green-100 */;
--secondary-foreground: 144 62% 21% /* green-900 */;
--muted: 0 0% 97% /* neutral-100 */;
--muted-foreground: 0 0% 46% /* neutral-500 */;
--accent: 326 78% 95% /* pink-100 */;
--accent-foreground: 336 70% 31% /* pink-900 */;
--destructive: 0 85% 61% /* red-500 */;
--destructive-foreground: 0 0% 99% /* neutral-50 */;
--border: 0 0% 90% /* neutral-200 */;
--input: 0 0% 90% /* neutral-200 */;
--ring: 21 91% 49% /* orange-600 */;
--radius: 0.75rem;
}
.dark {
--background: 0 0% 4% /* neutral-950 */;
--foreground: 0 0% 99% /* neutral-50 */;
--card: 0 0% 4% /* neutral-950 */;
--card-foreground: 0 0% 99% /* neutral-50 */;
--popover: 0 0% 4% /* neutral-950 */;
--popover-foreground: 0 0% 99% /* neutral-50 */;
--primary: 21 91% 49% /* orange-600 */;
--primary-foreground: 34 100% 97% /* orange-50 */;
--secondary: 143 65% 25% /* green-800 */;
--secondary-foreground: 139 77% 97% /* green-50 */;
--muted: 0 0% 15% /* neutral-800 */;
--muted-foreground: 0 0% 64% /* neutral-400 */;
--accent: 336 75% 36% /* pink-800 */;
--accent-foreground: 328 74% 98% /* pink-50 */;
--destructive: 0 63% 31% /* red-900 */;
--destructive-foreground: 0 0% 99% /* neutral-50 */;
--border: 0 0% 15% /* neutral-800 */;
--input: 0 0% 15% /* neutral-800 */;
--ring: 21 91% 49% /* orange-600 */;
}
}
```
## TEMPLATE.json
This has the colors/tints for each CSS variable.
> NOTE: colors prefixed with `primary`, `secondary`, `accent`, and `gray` will
> be replaced with the color value specified as CLI arguments. All other colors
> will be used directly, like `red-500`.
The following is the default theme template. You can override this by specifying
the `template=TEMPLATE.json` file.
```json
{
"light": {
"--background": "white",
"--foreground": "gray-950",
"--card": "white",
"--card-foreground": "gray-950",
"--popover": "white",
"--popover-foreground": "gray-950",
"--primary": "primary-600",
"--primary-foreground": "primary-50",
"--secondary": "secondary-100",
"--secondary-foreground": "secondary-900",
"--muted": "gray-100",
"--muted-foreground": "gray-500",
"--accent": "accent-100",
"--accent-foreground": "accent-900",
"--destructive": "red-500",
"--destructive-foreground": "gray-50",
"--border": "gray-200",
"--input": "gray-200",
"--ring": "primary-600",
"--radius": "0.5rem"
},
"dark": {
"--background": "gray-950",
"--foreground": "gray-50",
"--card": "gray-950",
"--card-foreground": "gray-50",
"--popover": "gray-950",
"--popover-foreground": "gray-50",
"--primary": "primary-600",
"--primary-foreground": "primary-50",
"--secondary": "secondary-800",
"--secondary-foreground": "secondary-50",
"--muted": "gray-800",
"--muted-foreground": "gray-400",
"--accent": "accent-800",
"--accent-foreground": "accent-50",
"--destructive": "red-900",
"--destructive-foreground": "gray-50",
"--border": "gray-800",
"--input": "gray-800",
"--ring": "primary-600"
}
}
```