主题
使用 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.
{
"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.
{
"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:
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--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.
: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
实用程序类。
¥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.