主题

使用 CSS 变量或 Tailwind CSS 实用类进行主题化。

你可以选择使用 CSS 变量或 Tailwind CSS 实用类进行主题化。

实用类

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

要使用实用类进行主题化，请将 tailwind.cssVariables 设置为 false 在你的 components.json 文件中。

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 Variables

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

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

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 变量用于文本颜色。

Given the following CSS variables:

--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;

Adding new colors

要添加新颜色，你需要将它们添加到你的 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 颜色 进行主题化，但如果你愿意，也可以使用其他颜色格式。

更多信息请参阅 Tailwind CSS 文档。