Github - shadcn-solid 组件库
文档
主题

主题

使用 CSS 变量或您选择的 CSS 框架进行主题设置。

您可以选择使用 CSS 变量或您选择的 CSS 框架的实用类进行主题设置。

实用类

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

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

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

或使用 uno。

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

CSS 变量

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

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

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

或使用 uno。

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

约定

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

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

给定以下 CSS 变量

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

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

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

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

变量列表

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

<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%;
输入框的边框颜色，例如 <TextField />、<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: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
用于焦点环
--ring: 215 20.2% 65.1%;
卡片、输入框和按钮的边框半径
--radius: 0.5rem;

添加新颜色

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

app/app.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))"
      }
    }
  }
};

或使用 uno。

uno.config.ts
export default defineConfig({
  theme: {
    colors: {
      warning: "hsl(var(--warning))",
      "warning-foreground": "hsl(var(--warning-foreground))"
    }
  }
});

您现在可以在您的组件中使用 warning 实用程序类。

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

其他颜色格式

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

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

Previous page - shadcn-solid 组件库 components.json 深色模式 Next page - shadcn-solid 组件库