カラー

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
      },
    },
  },
};

セマンティックカラー

セマンティックカラーはテーマに合わせて調整され、意味を伝え、ブランドアイデンティティを強化します。

効果的なパレットを作成するには、50 から 900 のカラーレンジを使用することをお勧めします。パレットを生成するには、Eva Design System、Smart Watch、Palette、または Color Box などのツールを使用できます。

セマンティックカラーは、TailwindCSSテーマオブジェクト内ではなく、nextui プラグインオプション内に配置する必要があります。

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));
}