SuperAPI AI 工具集

shadcn-core-theming

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:为 shadcn/ui 项目提供确定性的主题接线心智模型,覆盖 CSS 变量、暗色模式与设计令牌调色板,并处理 Tailwind v3 与 v4 之间的迁移和主题粘贴。

主要能力:区分 Tailwind v3.4 与 v4 的差异(变量格式 HSL 空格分隔 vs oklch、接线位置 tailwind.config.js vs globals.css 的 @theme inline、暗色声明 darkMode:["class"] vs @custom-variant dark、动画插件 tailwindcss-animate vs tw-animate-css);梳理默认令牌目录(19 个核心令牌、8 个 sidebar 令牌、5 个 chart 令牌,以及 v4 的 7 个派生圆角值);提供从零配置、添加暗色切换、粘贴主题三类决策树与常见模式。

必要用法:先检查 package.json 中 tailwindcss 版本,绝不混用 v3 与 v4 约定;v3 在变量中存 HSL 空格分隔值,并在 tailwind.config.js 用 hsl(var(--background)) 映射;v4 在变量中存 oklch,并用 @theme inline 映射;暗色用 .dark 类选择器而非 prefers-color-scheme;Next.js 用 next-themes 并在 html 上保留 suppressHydrationWarning;Vite 用官方自定义 Context 版本;条件类名统一用 cn()。

适用场景:新建 shadcn 项目主题、切换明暗模式、从主题构建器粘贴配色、v3 到 v4 迁移排错。

限制:不提供具体命令安装之外的定制实现,缺失事实暂未提供;主题构建器只输出变量值,不输出映射层。