自定义主题

如前文所述，NextUI 提供了两个预定义的主题，light 和 dark。这些主题本质上是灵活的，允许您根据您的特定偏好或项目需求进行定制。

此外，您还可以根据默认主题创建自己的主题。每个主题都包含 布局 令牌和 颜色 令牌，旨在简化您的定制过程。

自定义布局

您可以修改各种布局方面，包括间距单位、字体大小、行高、半径等。

布局令牌可以全局应用于所有主题，也可以专门应用于所选主题。

全局布局自定义

假设您需要在所有主题中使用更小的边框半径、更细的边框宽度以及更不透明的禁用元素。您可以通过将以下代码添加到 tailwind.config.js 文件中来实现这些更改。

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    nextui({
      layout: {
        disabledOpacity: "0.3", // opacity-[0.3]
        radius: {
          small: "2px", // rounded-small
          medium: "4px", // rounded-medium
          large: "6px", // rounded-large
        },
        borderWidth: {
          small: "1px", // border-small
          medium: "1px", // border-medium
          large: "2px", // border-large
        },
      },
      themes: {
        light: {},
        dark: {},
      },
    }),
  ],
};

由于 NextUI 组件采用了布局令牌，因此修改将反映在所有使用它们的组件中。例如，按钮 组件使用 radius 令牌来设置边框半径，并使用 borderWidth 令牌来定义变体为 bordered 时的边框宽度。

让我们看看 按钮 组件在更改之后的样子。

import {Button} from "@nextui-org/react";

export default function App() {
  return (
    <div className="flex gap-4">
      <Button variant="bordered" radius="md">
        Button
      </Button>
      <Button isDisabled color="primary" radius="md">
        Disabled
      </Button>
    </div>
  );
}

请参阅 布局 部分，以了解有关可用令牌的更多详细信息。

自定义颜色

现在，假设您希望修改深色主题的主要颜色和焦点颜色。可以通过将以下代码添加到 tailwind.config.js 文件中来实现此目的。

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    nextui({
      themes: {
        dark: {
          colors: {
            primary: {
              DEFAULT: "#BEF264",
              foreground: "#000000",
            },
            focus: "#BEF264",
          },
        },
      },
    }),
  ],
};

此修改将影响所有使用 primary 颜色的组件。例如，按钮 组件在变体为 solid 或 ghost 时，使用 primary 颜色作为背景颜色。

import {Button} from "@nextui-org/react";

export default function App() {
  return (
    <div className="flex gap-4">
      <Button color="primary" variant="solid">Solid</Button>
      <Button color="primary" variant="ghost">Ghost</Button>
    </div>
  );
}

🎉 完成！您已成功自定义默认主题。请参阅 颜色 部分，了解有关可用语义颜色和颜色标记的更多详细信息。