Theme
使用 SSP UI Registry 主题提供统一的 Design Token 与样式
目标
通过下载并接入 SSP Theme，可以快速获得与 Registry 组件一致的颜色体系、排版与暗色模式配置。该主题基于 Tailwind CSS v4，并覆盖 shadcn/ui 所需的 CSS 变量。
前置条件
- Node.js >= 22。
- Tailwind CSS >= 4（确保已完成基础安装，可参考 官方指南）。
- 项目已启用 PostCSS 或其他方式引入全局样式。
下载主题资源
npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/ssp-style.jsonyarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/ssp-style.jsonpnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/ssp-style.jsonbunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/ssp-style.json下载后脚本会根据 target 自动写入项目：
- Next.js：增量更新
app/globals.css或src/app/globals.css（以实际路径为准）。 - Vite（React）或其他纯前端框架：增量更新
src/App.css。
无需手动创建额外样式文件，导入逻辑会由脚本自动维护。
接入流程
- 重新运行 Tailwind：若使用本地开发服务器，确保重新启动或刷新以加载新的 CSS 变量。
- 验证 CSS 变量：在浏览器中检查
globals.css/App.css是否新增.theme-root或:root变量定义。 - 确认暗色模式（可选）：Next.js 默认支持
class模式，确保在<html>元素中切换class="dark"时变量生效。Vite 项目可在根组件上添加className="dark"进行验证。
验证主题
- 在组件示例中查看按钮、输入框等是否符合设计稿。
- 使用浏览器开发者工具检查 CSS 变量是否被正确注入，如
--primary,--radius等。 - 调整系统主题或手动切换
dark类名，确认暗色样式生效。
自定义建议
- 如需修改品牌色，可在写入后的
globals.css/App.css中覆盖对应变量，例如：
:root {
--primary: 216 94% 52%;
}- 针对特定页面可使用
:where(.dashboard)等作用域选择器包裹变量，避免全局影响。 - 若希望同步回 Registry，可在
registry/ssp/theme/style.json修改后运行bun run registry:sync，再重新下载。
下一步
- 完成主题接入后，继续阅读 UI 组件快速入门 了解如何安装组件。
- 若需拓展更多 Design Token，可参考
registry/ssp/theme/_metadata/下的示例文件。