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

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

工具类

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

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

components.json

  1. {
  2.   "style": "default",
  3.   "rsc": true,
  4.   "tailwind": {
  5.     "config": "tailwind.config.js",
  6.     "css": "app/globals.css",
  7.     "baseColor": "slate",
  8.     "cssVariables": false
  9.   },
  10.   "aliases": {
  11.     "components": "@/components",
  12.     "utils": "@/lib/utils"
  13.   }
  14. }

CSS 变量

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

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

components.json

  1. {
  2.   "style": "default",
  3.   "rsc": true,
  4.   "tailwind": {
  5.     "config": "tailwind.config.js",
  6.     "css": "app/globals.css",
  7.     "baseColor": "slate",
  8.     "cssVariables": true
  9.   },
  10.   "aliases": {
  11.     "components": "@/components",
  12.     "utils": "@/lib/utils"
  13.   }
  14. }

约定

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

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

给定以下 CSS 变量：

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

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

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

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

变量列表

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

默认背景色： 等

  1. --background: 0 0% 100%;
  2. --foreground: 222.2 47.4% 11.2%;

例如 、 和 的背景色

  1. --muted: 210 40% 96.1%;
  2. --muted-foreground: 215.4 16.3% 46.9%;

< Card /> 的背景色

  1. --card: 0 0% 100%;
  2. --card-foreground: 222.2 47.4% 11.2%;

用于弹出菜单背景色，例如 、、

  1. --popover: 0 0% 100%;
  2. --popover-foreground: 222.2 47.4% 11.2%;

默认边框颜色

  1. --border: 214.3 31.8% 91.4%;

例如 、