@soybeanjs/shadcn-theme

一个功能强大且灵活的 shadcn/ui 主题 CSS 变量生成器，提供预设配色方案、深浅模式输出，以及可选的自定义预设扩展。

English

✨ 特性

- 🎨 丰富的预设主题 - 内置 base / primary / feedback 多种预设组合
- 🌗 深浅模式输出 - 支持 .dark / @media (prefers-color-scheme: dark) / 自定义选择器
- 🎯 灵活的颜色格式 - 支持 hsl 与 oklch 输出
- 🔧 可扩展 - 通过 preset 注入自定义配色（含 sidebar / chart 等扩展字段）
- 🌈 色板变量生成 - 自动生成 primary/destructive/success/warning/info/carbon 的 50-950 色阶变量
- 📦 轻量依赖 - 仅依赖 @soybeanjs/colord 进行颜色与色板处理
- 🧩 纯生成器 - 仅返回 CSS 字符串，不会自动操作 DOM（可自行注入 style 标签）

📦 安装

``bash
pnpm add @soybeanjs/shadcn-theme
`

🚀 快速开始

$3

`typescript
import { createShadcnTheme } from '@soybeanjs/shadcn-theme';

// 使用默认预设（gray + indigo + classic + extended）
const theme = createShadcnTheme();
const css = theme.getCss();

// 自定义预设组合
const custom = createShadcnTheme({
base: 'zinc',
primary: 'blue',
feedback: 'vivid',
sidebar: 'extended',
radius: '0.625rem',
styleTarget: ':root',
darkSelector: 'class',
format: 'hsl'
});

const customCss = custom.getCss();
`

###（可选）注入到 DOM

本库默认只生成 CSS 字符串。如果你希望在浏览器里动态切换主题，可以自行把生成结果写入