customization

# 自定义与主题设置 组件引用语义化 CSS 变量令牌。更改变量即可更改所有组件。 ## 内容 - 工作原理 (CSS 变量 → Tailwind 工具类 → 组件) - 颜色变量与 OKLCH 格式 - 深色模式设置 - 更改主题 (预设, CSS 变量) - 添加自定义颜色 (Tailwind v3 和 v4) - 边框圆角 - 自定义组件 (变体, className, 包装器) - 检查更新 --- ## 工作原理 1. 在 `:root` (亮色) 和 `.dark` (深色模式) 中定义 CSS 变量。 2. Tailwind 将其映射为工具类：`bg-primary`, `text-muted-foreground` 等。 3. 组件使用这些工具类 — 更改变量会更改所有引用该变量的组件。 --- ## 颜色变量 每个颜色遵循 `name` / `name-foreground` 约定。基础变量用于背景，`-foreground` 用于该背景上的文本/图标。 | 变量 | 用途 | | -------------------------------------------- | -------------------------------- | | `--background` / `--foreground` | 页面背景和默认文本 | | `--card` / `--card-foreground` | 卡片表面 | | `--primary` / `--primary-foreground` | 主要按钮和操作 | | `--secondary` / `--secondary-foreground` | 次要操作 | | `--muted` / `--muted-foreground` | 静默/禁用状态 | | `--accent` / `--accent-foreground` | 悬停和强调状态 | | `--destructive` / `--destructive-foreground` | 错误和破坏性操作 | | `--border` | 默认边框颜色 | | `--input` | 表单输入边框 | | `--ring` | 焦点环颜色 | | `--chart-1` 到 `--chart-5` | 图表/数据可视化 | | `--sidebar-*` | 侧边栏特定颜色 | | `--surface` / `--surface-foreground` | 次要表面 | 颜色使用 OKLCH：`--primary: oklch(0.205 0 0)`，其中值分别为亮度 (0–1)、色度 (0 = 灰色) 和色相 (0–360)。 --- ## 深色模式 通过根元素上的 `.dark` 类进行切换。在 Next.js 中，使用 `next-themes`： tsx import { ThemeProvider } from "next-themes"