Docs
主题设计

主题设计

使用 CSS 变量或 Tailwind CSS 进行主题设计。

你可以选择使用 CSS 变量或 Tailwind CSS 工具类来进行主题设计。

工具类

<div className="bg-zinc-950 dark:bg-white" />

要使用工具类进行主题设计，请在您的 components.json 配置文件中将 tailwind.cssVariables 设置为 false。

components.json
{
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

CSS 变量

<div className="bg-background text-foreground" />

要使用 CSS 变量来进行主题设计，请在您的 components.json 配置文件中将 tailwind.cssVariables 设置为 true。

components.json
{
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

约定

我们对配色使用简单的 background 和 foreground 约定。background 变量用于显示组件的背景颜色，foreground 变量用于显示文本颜色。

假设有以下 CSS 变量：

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

以下组件的 background 颜色将是 hsl(var(--primary))，foreground 颜色将是 hsl(var(--primary-foreground))。

<div className="bg-primary text-primary-foreground">Hello</div>

变量列表

以下是可用于自定义的变量列表：

Default background color of <body />...etc
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
Background color for <Card />
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
Default border color
--border: 214.3 31.8% 91.4%;
Border color for inputs such as <Input />, <Select />, <Textarea />
--input: 214.3 31.8% 91.4%;
Primary colors for <Button />
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
Secondary colors for <Button />
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
Used for destructive actions such as <Button variant="destructive">
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
Used for focus ring
--ring: 215 20.2% 65.1%;
Border radius for card, input and buttons
--radius: 0.5rem;

添加新配色

要添加新配色，您需要将其添加到 CSS 文件以及 tailwind.config.js 配置文件中。

app/globals.css
:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}
 
.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}
tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}

现在您就可以在组件中使用 warning 工具类了。

<div className="bg-warning text-warning-foreground" />

其他颜色格式

我推荐使用 HSL 颜色格式 进行主题设计，但如果你喜欢，也可以使用其他颜色格式。

有关使用 rgb、rgba 或 hsl 颜色格式的更多信息，请参阅 Tailwind CSS 文档。

components.json夜间模式