主题 - 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 文档。

components.json 深色模式