shadcn-vue

主题定制

使用 CSS 变量定制应用程序的主题

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

Utility classes

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

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

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": false   # 请在此处修改
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

CSS Variables

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

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

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

规范

我们使用简单的背景和前景颜色规范。背景变量用于组件的背景颜色，前景变量则用于文本颜色。

当变量用于组件的背景颜色时，会省略背景的后缀。

给定以下 CSS 变量以示例：

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

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

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

CSS 变量必须在没有颜色空间函数的情况下定义。 更多相关信息，请参见 Tailwind CSS 文档。

变量表

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

/* 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 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 文件中。

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

.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        'warning': 'hsl(var(--warning))',
        'warning-foreground': 'hsl(var(--warning-foreground))',
      },
    },
  },
}

现在，你可以在组件中使用警告（warning）工具类。

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

其他颜色格式化方案

我推荐使用 HSL colors 进行主题设置，但如果您喜欢，也可以使用其他颜色格式化方案。

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

Hex -> Channel

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