实时预览
页面右上角或下方按钮切换主题。颜色样本和 React 组件同时变化。
background
primary
secondary
muted
安装
npx shadcn add @conteman/theme先在 components.json 配置 "@conteman": "https://ui.conteman.com/r/{name}.json"。Button、Input、Table 会自动依赖这个 registry:theme 安装项；安装会更新已有的同名变量，请检查差异。
在项目中切换深色模式
shadcn 初始化为 Tailwind CSS 4 准备主题映射。确保入口 CSS 保留：
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));在根元素切换 .dark，即可使用安装器写入的 :root 与 .dark 变量：
document.documentElement.classList.toggle("dark");主题变量
主题包含 background、foreground、card、popover、primary、secondary、muted、accent、destructive、border、input、ring 及对应前景色，默认方角。主题值在 registry.json 的 cssVars.light / cssVars.dark 中维护。
文档站的桥接
Nimbus 自带 data-mode="dark"、系统主题跟随和持久化切换。本项目将注册表变量限定在 .conteman-preview 内，并将 Nimbus 的 --nb-* 颜色映射到组件变量。Base UI Portal 同样携带预览类，因此弹层不丢失主题。
生成的桥接 CSS 来自同一份主题数据。安装到项目的组件仍使用标准 .dark，不依赖文档站。