🌐 Nodejs.cn
新建

主题

PreviousNext

使用 CSS 变量和颜色实用程序进行主题设置。

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

🌐 You can choose between using CSS variables (recommended) or utility classes for theming.

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": "new-york",
  "rsc": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

约定

🌐 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.

给出以下 CSS 变量：

🌐 Given the following CSS variables:

--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);

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

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

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

变量列表

🌐 List of variables

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

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

app/globals.css
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}
 
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
}

添加新颜色

🌐 Adding new colors

要添加新颜色，你需要将它们添加到 CSS 文件中的 :root 和 dark 伪类下。然后，使用 @theme inline 指令将这些颜色作为 CSS 变量使用。

🌐 To add new colors, you need to add them to your CSS file under the :root and dark pseudo-classes. Then, use the @theme inline directive to make the colors available as CSS variables.

app/globals.css
:root {
  --warning: oklch(0.84 0.16 84);
  --warning-foreground: oklch(0.28 0.07 46);
}
 
.dark {
  --warning: oklch(0.41 0.11 46);
  --warning-foreground: oklch(0.99 0.02 95);
}
 
@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: 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

有关在 Tailwind CSS 中使用颜色的更多信息，请参阅 Tailwind CSS 文档。

🌐 See the Tailwind CSS documentation for more information on using colors in Tailwind CSS.

基础颜色

🌐 Base Colors

可用的基色有：中性色、石色、锌色、淡紫色、橄榄色、雾色和褐灰色。

🌐 The available base colors are: Neutral, Stone, Zinc, Mauve, Olive, Mist, and Taupe.

你可以在初始化项目时通过使用预设或更新 components.json 文件中的 baseColor 字段来设置基色。

🌐 You can set the base color when initializing your project using a preset or by updating the baseColor field in your components.json file.