---
title: "Conteman 主题"
description: "用一套 CSS 变量连接浅色、深色和 Tailwind CSS 4。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ui.conteman.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Conteman 主题

## 实时预览

页面右上角或下方按钮切换主题。颜色样本和 React 组件同时变化。

## 安装

```sh
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 保留：

```css
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
```

在根元素切换 `.dark`，即可使用安装器写入的 `:root` 与 `.dark` 变量：

```ts
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`，不依赖文档站。

Source: https://ui.conteman.com/theme/index.mdx