颜色

NextUI 的插件使你能够个性化主题的语义颜色，例如 primary、secondary、success 等。

module.exports = {
  plugins: [
    nextui({
      themes: {
        light: {
          // ...
          colors: {},
        },
        dark: {
          // ...
          colors: {},
        },
        // ... custom themes
      },
    }),
  ],
};

注意：颜色配置在所有组件中全局应用。

默认颜色

NextUI 提供开箱即用的默认调色板，非常适合你仍未确定特定品牌颜色的情况。

这些颜色分为 通用颜色 和 语义颜色。

• 通用颜色：在主题中保持一致。
• 语义颜色：根据所选主题进行调整。

通用颜色

通用颜色，如 TailwindCSS 颜色，无论主题如何，始终保持一致。

为了避免与 TailwindCSS 颜色冲突，通用颜色最初被禁用，但可以使用 addCommonColors 选项激活它们。

module.exports = {
  plugins: [
    nextui({
      addCommonColors: true,
    }),
  ],
};

启用此选项会用以下内容补充一些 TailwindCSS 默认颜色

module.exports = {
  theme: {
    extend: {
      colors: {
        white: "#FFFFFF",
        black: "#000000",
        blue: {
          50: "#e6f1fe",
          100: "#cce3fd",
          200: "#99c7fb",
          300: "#66aaf9",
          400: "#338ef7",
          500: "#006FEE",
          600: "#005bc4",
          700: "#004493",
          800: "#002e62",
          900: "#001731",
        },
        // .. rest of the colors
      },
    },
  },
};

语义颜色

语义颜色会随着主题而调整，传达含义并强化您的品牌标识。

For an effective palette, we recommend using color ranges from 50 to 900. You can use tools like Eva Design System, Smart Watch, Palette or Color Box to generate your palette.

语义颜色应放置在 nextui 插件选项中，而不是 TailwindCSS 主题对象中。

module.exports = {
  plugins: [
    nextui({
      themes: {
        light: {
          colors: {
            background: "#FFFFFF", // or DEFAULT
            foreground: "#11181C", // or 50 to 900 DEFAULT
            primary: {
              //... 50 to 900
              foreground: "#FFFFFF",
              DEFAULT: "#006FEE",
            },
            // ... rest of the colors
          },
        },
        dark: {
          colors: {
            background: "#000000", // or DEFAULT
            foreground: "#ECEDEE", // or 50 to 900 DEFAULT
            primary: {
              //... 50 to 900
              foreground: "#FFFFFF",
              DEFAULT: "#006FEE",
            },
          },
          // ... rest of the colors
        },
        mytheme: {
          // custom theme
          extend: "dark",
          colors: {
            primary: {
              DEFAULT: "#BEF264",
              foreground: "#000000",
            },
            focus: "#BEF264",
          },
        },
      },
    }),
  ],
};

更改文档主题以查看语义颜色在实际中的效果。

使用语义颜色

语义颜色可以在项目中使用颜色的任何地方应用，例如文本颜色、边框颜色、背景颜色实用工具等。

<div class="bg-primary-500 text-primary-50 rounded-small px-2 py-1">
  This is a primary color box
</div>

Javascript 变量

将语义和常用颜色导入到您的 JavaScript 文件中，如下所示

import {commonColors, semanticColors} from "@nextui-org/theme";

console.log(commonColors.white); // #FFFFFF
console.log(commonColors.blue[500]); // #006FEE

console.log(semanticColors.dark.warning.DEFAULT); // #FFC107
console.log(semanticColors.light.primary.DEFAULT); // #006FEE

CSS 变量

NextUI 使用格式 --prefix-colorname-shade 为每个语义颜色创建 CSS 变量。默认情况下，前缀是 nextui，但您可以使用 prefix 选项进行更改。

module.exports = {
  plugins: [
    nextui({
      prefix: "myapp",
    }),
  ],
};

然后您可以在 CSS 文件中使用 CSS 变量。

/* With default prefix */
.my-component {
  background-color: hsl(var(--nextui-primary-500));
}
/*  With custom prefix */
.my-component {
  background-color: hsl(var(--myapp-primary-500));
}