主题 - shadcn 中文网

Docs

主题

使用 CSS 变量或 Tailwind CSS 进行主题化。

你可以选择使用 CSS 变量或 Tailwind CSS 实用程序类进行主题设置。

¥You can choose between using CSS variables or Tailwind CSS utility classes for theming.

实用程序类

¥Utility classes

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

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

¥To use utility classes for theming set tailwind.cssVariables to false in your components.json file.

components.json

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

CSS 变量

¥CSS Variables

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

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

¥To use CSS variables for theming set tailwind.cssVariables to true in your components.json file.

components.json

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

约定

¥Convention

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

¥We use a simple background and foreground convention for colors. The background variable is used for the background color of the component and the foreground variable is used for the text color.

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

¥The background suffix is omitted when the variable is used for the background color of the component.

给出以下 CSS 变量：

¥Given the following CSS variables:

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

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

¥The background color of the following component will be hsl(var(--primary)) and the foreground color will be hsl(var(--primary-foreground)).

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

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

¥CSS variables must be defined without color space function. See the Tailwind CSS documentation for more information.

变量列表

¥List of variables

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

¥Here's the list of variables available for customization:

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 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;

添加新颜色

¥Adding new colors

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

¥To add new colors, you need to add them to your CSS file and to your tailwind.config.js file.

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

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

¥You can now use the warning utility class in your components.

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

其他颜色格式

¥Other color formats

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

¥I recommend using HSL colors for theming but you can also use other color formats if you prefer.

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

¥See the Tailwind CSS documentation for more information on using rgb, rgba or hsl colors.

components.json 夜间模式

页面导航

实用程序类
CSS 变量