文档
主题

主题

使用 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 变量

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

给定以下 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>

变量列表

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

<body /> 等等的默认背景颜色...
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
<TabsList />、<Skeleton /> 和 <Switch /> 等的静音背景
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
<Card /> 的背景颜色
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
<DropdownMenu />、<HoverCard />、<Popover /> 等气泡提示的背景颜色
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
默认边框颜色
--border: 214.3 31.8% 91.4%;
<Input />、<Select />、<Textarea /> 等输入框的边框颜色
--input: 214.3 31.8% 91.4%;
<Button /> 的主要颜色
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
<Button /> 的次要颜色
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
用于强调，例如 <DropdownMenuItem>、<SelectItem> 等等的悬停效果
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
用于破坏性操作，例如 <Button variant="destructive">
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
用于焦点环
--ring: 215 20.2% 65.1%;
卡片、输入框和按钮的圆角
--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暗黑模式