美しいコンポーネントでより速く開発
NextUI Pro

テーマ

テーマ設定は、ユーザーインターフェース（UI）を設計する上で重要な要素です。アプリケーション全体で一貫した美観を適用し、ユーザーエクスペリエンスを向上させ、視覚的な統一感を維持することができます。

NextUIでは、TailwindCSSプラグインを使用して、簡単かつ柔軟なテーマのカスタマイズを可能にしています。このプラグインは、tw-colors プラグインをベースにしており、L-Blondy が開発しました。これにより、アプリケーションのさまざまなコンポーネントにわたって、カラースキーム、レイアウト構成などをカスタマイズできます。

テーマとは？

NextUIにおけるテーマとは、アプリケーション全体で一貫して適用できる、あらかじめ定義された色、レイアウト属性、その他のUI要素のセットのことです。テーマは、視覚的な一貫性を確保し、ユーザーエクスペリエンスを向上させ、アプリの外観の管理と更新を簡素化します。

セットアップ

NextUIのテーマ機能を使用するための最初のステップは、nextuiプラグインをtailwind.config.jsファイルに追加することです。以下にその方法の例を示します。

注: pnpmとモノレポアーキテクチャを使用している場合は、ROOTのnode_modulesを指していることを確認してください。

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


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

使い方

プラグインをtailwind.config.jsファイルに追加した後、デフォルトのテーマ（ライト/ダーク）またはカスタムテーマを使用できます。以下は、これらのテーマをmain.jsxまたはmain.tsxで適用する方法です。

src ディレクトリに移動し、main.jsx または main.tsx 内で、ルート要素に以下のクラス名を適用します。

  • ライトテーマの場合は light。
  • ダークテーマの場合は dark。
  • テキストの色を設定するには text-foreground。
  • 背景色を設定するには bg-background。
// main.tsx or main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import {NextUIProvider} from "@nextui-org/react";
import App from "./App";
import "./index.css";


ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <NextUIProvider>
      <main className="dark text-foreground bg-background">
        <App />
      </main>
    </NextUIProvider>
  </React.StrictMode>,
);

注：カラークラスの詳細については、カラー セクションを参照してください。

デフォルトのプラグインオプション

nextui プラグインはデフォルトの構造を提供します。以下にその概要を示します。

module.exports = {
  plugins: [
    nextui({
      prefix: "nextui", // prefix for themes variables
      addCommonColors: false, // override common colors (e.g. "blue", "green", "pink").
      defaultTheme: "light", // default theme from the themes object
      defaultExtendTheme: "light", // default theme to extend on custom themes
      layout: {}, // common layout tokens (applied to all themes)
      themes: {
        light: {
          layout: {}, // light theme layout tokens
          colors: {}, // light theme colors
        },
        dark: {
          layout: {}, // dark theme layout tokens
          colors: {}, // dark theme colors
        },
        // ... custom themes
      },
    }),
  ],
};

テーマオプション

これらは、テーマにカスタム設定を適用するために使用できるオプションです。

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

ネストされたテーマ

NextUI はネストされたテーマをサポートしており、アプリケーションの異なるセクションに異なるテーマを適用できます。

<html class="dark">
  ...
  <div class="light">...</div>
  <div class="purple-dark">...</div>
</html>

テーマベースのバリアント

NextUI では、現在アクティブなテーマに基づいて TailwindCSS スタイルを適用できます。以下に、その方法の例を示します。

<!-- In dark theme, background will be dark and text will be light. 
  In light theme, background will be light and text will be dark -->


<div class="dark dark:bg-gray-800 dark:text-white bg-white text-black">
  ...
  <div>Text color changes based on theme</div>
</div>


<div class="light light:bg-gray-100 light:text-black bg-black text-white">
  ...
  <div>Text color changes based on theme</div>
</div>

API リファレンス

次の表は、NextUI でテーマを扱う際に使用できるさまざまな属性の概要を示しています。

属性型説明デフォルト
prefixstringCSS 変数のプレフィックス。nextui
addCommonColorsbooleantrue の場合、一般的な nextui カラー (例: "blue"、"green"、"purple") が TailwindCSS のデフォルトカラーを置き換えます。false
defaultThemelight | dark使用するデフォルトのテーマ。light
defaultExtendThemelight | dark拡張するデフォルトのテーマ。light
layoutLayoutThemeレイアウトの定義。-
themesConfigThemesテーマの定義。-

型

ConfigThemes

type ConfigTheme = {
  extend?: "light" | "dark"; // base theme to extend
  layout?: LayoutTheme; // see LayoutTheme
  colors?: ThemeColors; // see ThemeColors
};


type ConfigThemes = Record<string, ConfigTheme>;

LayoutTheme

type BaseThemeUnit = {
  small?: string;
  medium?: string;
  large?: string;
};


type FontThemeUnit = {
  small?: string;
  medium?: string;
  large?: string;
  tiny?: string;
};


interface LayoutTheme {
  /**
   * The default font size applied across the components.
   */
  fontSize?: FontThemeUnit;
  /**
   * The default line height applied across the components.
   */
  lineHeight?: FontThemeUnit;
  /**
   * The default radius applied across the components.
   * we recommend to use `rem` units.
   */
  radius?: BaseThemeUnit;
  /**
   * A number between 0 and 1 that is applied as opacity-[value] when
   * the component is disabled.
   */
  disabledOpacity?: string | number;
  /**
   * The default height applied to the divider component.
   * we recommend to use `px` units.
   */
  dividerWeight?: string;
  /**
   * The border width applied across the components.
   */
  borderWidth?: BaseThemeUnit;
  /**
   * The box shadow applied across the components.
   */
  boxShadow?: BaseThemeUnit;
}

ThemeColors

type ColorScale = {
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
  foreground: string; // contrast color
  DEFAULT: string;
};


type BaseColors = {
  background: ColorScale; // the page background color
  foreground: ColorScale; // the page text color
  divider: ColorScale; // used for divider and single line border
  overlay: ColorScale; // used for modal, popover, etc.
  focus: ColorScale; // used for focus state outline
  content1: ColorScale; // used for card, modal, popover, etc.
  content2: ColorScale;
  content3: ColorScale;
  content4: ColorScale;
};


// brand colors
type ThemeColors = BaseColors & {
  default: ColorScale;
  primary: ColorScale;
  secondary: ColorScale;
  success: ColorScale;
  warning: ColorScale;
  danger: ColorScale;
};
フレームワーク: Astroレイアウト