主题

使用 CSS 变量自定义应用程序的外观和感觉。

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

工具类 ​

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

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

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

CSS 变量 ​

html
<div class="bg-background text-foreground" />

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

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

约定 ​

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

以下面的 CSS 变量为例

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

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

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

变量列表 ​

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

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

添加新颜色 ​

要添加新颜色，您需要将它们添加到 CSS 文件和 tailwind.config.js 文件中。

css
:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}

.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}
js
module.exports = {
  theme: {
    extend: {
      colors: {
        'warning': 'hsl(var(--warning))',
        'warning-foreground': 'hsl(var(--warning-foreground))',
      },
    },
  },
}

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

html
<div class="bg-warning text-warning-foreground" />

其他颜色格式 ​

我建议使用 HSL 颜色 进行主题设置，但如果您愿意，也可以使用其他颜色格式。

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

十六进制 -> 颜色通道 ​

您可以使用此工具将十六进制颜色转换为不带颜色空间函数的 HSL。只需添加十六进制格式的颜色，复制其中一个生成的数值，然后将其添加到 CSS 变量中。

在 GitHub 上编辑此页面