主题定制

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

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

工具类 ​

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

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

components.json
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。

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

添加新颜色 ​

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

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

.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}
tailwind.config.js
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 文档。

Hex -> 颜色通道 ​

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

Edit this page on GitHub