Auth0 Universal Componentsでスタイルとテーマをカスタマイズする

Tailwind CSS、CSS 変数、組み込みのテーマプリセットを使用して、Auth0 Universal Components のデザインシステムをカスタマイズします。

Auth0 Universal Components は現在 EA です。これを使用すると、Okta の Master Subscription Agreement に定められた該当する Free Trial 条項に 同意したものとみなされます。詳しくは、Product Release Stages を参照してください。

Auth0 Universal Components は、Tailwind CSS と Radix UI primitives を活用した柔軟なデザインシステムを基盤としています。スタイル設定は Auth0ComponentProvider を通じて行われ、上位レベルのプリセットを使用することも、CSS 変数を細かく上書きすることもできます。

このアーキテクチャにより、ID フローのルック＆フィールをアプリケーションに自然に溶け込ませることができます。

React

​

はじめに

1. スタイルシートをインポートします。

import "@auth0/universal-components-react/styles";

Tailwind v4 ユーザー: CSS ファイルに @import "@auth0/universal-components-react/tailwind" を追加します。

2. ブランドカラーを追加する。

:root {
  --primary: #4f46e5; /* ブランドカラー */
  --primary-foreground: #ffffff; /* ボタンのテキスト */
}

完了しました。すべてのボタン、リンク、アクティブ状態にブランドが適用されました。

---

​

テーマプリセット

themeSettings を Auth0ComponentProvider に渡して、組み込みテーマを切り替えます。

App.tsx

<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  <App />
</Auth0ComponentProvider>

プリセット	説明
default	シャドウとボーダーのバランスが取れた、標準的な Auth0 の外観
minimal	シャドウを抑え、ボーダーを控えめにした軽量なスタイル
rounded	角丸を大きくして、より柔らかな印象にしたスタイル

---

​

CSS変数の確認

すべての視覚的プロパティはCSSカスタムプロパティで制御されます。スタイルシートまたは themeSettings.variables プロパティでオーバーライドできます。

色（ライト）

:root {
  /* ブランド - 最も影響力のある変数 */
  --primary: oklch(37% 0 0);              /* ボタン、リンク、アクティブ状態 */
  --primary-foreground: oklch(100% 0 0);  /* プライマリサーフェス上のテキスト */

/_ サーフェス _/
--background: oklch(100% 0 0); /_ ページ背景 _/
--foreground: oklch(9% 0 0); /_ デフォルトテキスト _/
--card: oklch(100% 0 0); /_ カード背景 _/
--card-foreground: oklch(0% 0 0); /_ カード内テキスト _/
--popover: oklch(100% 0 0); /_ ドロップダウン/ダイアログ背景 _/
--popover-foreground: oklch(9% 0 0); /_ ポップオーバー内テキスト _/
--input: oklch(100% 0 0); /_ 入力フィールド背景 _/

/_ セカンダリ & ミュート _/
--secondary: oklch(96% 0 0);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(96% 0 0); /_ 無効状態の背景 _/
--muted-foreground: oklch(45% 0 0); /_ プレースホルダーテキスト _/

/_ アクセント & 破壊的アクション _/
--accent: oklch(97% 0 0); /_ ホバーハイライト _/
--accent-foreground: oklch(9% 0 0);
--destructive: oklch(93% 0.03 17); /_ エラー状態 _/
--destructive-foreground: oklch(36% 0.14 17);

/_ ボーダー _/
--border: oklch(89% 0 0);
--ring: oklch(89% 0 0); /_ フォーカスリング _/
}

色（ダーク）

.dark {
  /* ブランド */
  --primary: oklch(70% 0.15 250);         /* ダーク背景では明るく */
  --primary-foreground: oklch(10% 0 0);

  /* サーフェス */
  --background: oklch(12% 0 0);
  --foreground: oklch(95% 0 0);
  --card: oklch(15% 0 0);
  --card-foreground: oklch(95% 0 0);
  --popover: oklch(15% 0 0);
  --popover-foreground: oklch(95% 0 0);
  --input: oklch(18% 0 0);

  /* セカンダリ＆ミュート */
  --secondary: oklch(20% 0 0);
  --secondary-foreground: oklch(95% 0 0);
  --muted: oklch(20% 0 0);
  --muted-foreground: oklch(60% 0 0);

  /* アクセント＆デストラクティブ */
  --accent: oklch(25% 0 0);
  --accent-foreground: oklch(95% 0 0);
  --destructive: oklch(30% 0.15 17);
  --destructive-foreground: oklch(95% 0.05 17);

  /* ボーダー */
  --border: oklch(25% 0 0);
  --ring: oklch(35% 0 0);
}

角丸の半径

:root {
  /* 共通 - 全体的な印象に合わせて調整してください */
  --radius-sm:  4px;    /* タグ、チップ */
  --radius-md:  6px;    /* 小さな要素 */
  --radius-lg:  10px;   /* ボタン、入力欄 */
  --radius-xl:  12px;   /* カード */
  --radius-2xl: 16px;   /* モーダル、大きなパネル */

/_ 細かい設定（ほとんど使用しない） _/
--radius-xs: 2px;
--radius-3xl: 20px;
--radius-4xl: 24px;
--radius-5xl: 32px;
}

タイポグラフィ

:root {
  --font-size-page-header:      2.25rem;   /* 36px - メインタイトル */
  --font-size-heading:          1.5rem;    /* 24px - セクション見出し */
  --font-size-title:            1.25rem;   /* 20px - カードタイトル */
  --font-size-subtitle:         1.125rem;  /* 18px - 副見出し */
  --font-size-body:             1rem;      /* 16px - 本文テキスト */
  --font-size-paragraph:        0.875rem;  /* 14px - 説明文 */
  --font-size-label:            0.875rem;  /* 14px - フォームラベル */
  --font-size-page-description: 0.875rem;  /* 14px - サブタイトル */
}

---

​

スタイルコンポーネント

すべてのコンポーネントは、グローバルスタイルに影響を与えずに特定のスタイルを上書きするための styling プロパティを受け付けます。

<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--primary": "#059669", // このコンポーネントのみオーバーライド
      },
      light: { "--card": "#f8fafc" },
      dark: { "--card": "#1e293b" },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>

使用するタイミング：

• variables - コンポーネントに適用される CSS カスタムプロパティのオーバーライド
• classes - 特定のコンポーネント部分に適用する Tailwind またはカスタムクラス

コンポーネント別の利用可能なクラスの対象

各コンポーネントは、主要なセクションごとにクラスターゲットを公開します。

SsoProviderCreate

• SsoProviderCreate-header, SsoProviderCreate-wizard
• ProviderSelect-root, ProviderDetails-root, ProviderConfigure-root

SsoProviderTable

• SsoProviderTable-header, SsoProviderTable-table, SsoProviderTable-row

SsoProviderEdit

• SsoProviderEdit-header, SsoProviderEdit-tabs
• SsoProviderEdit-ssoTab, SsoProviderEdit-provisioningTab, SsoProviderEdit-domainsTab

DomainTable

• DomainTable-header, DomainTable-table
• DomainTable-createModal, DomainTable-configureModal, DomainTable-deleteModal

OrganizationDetailsEdit

• OrganizationDetailsEdit-header, OrganizationDetailsEdit-form, OrganizationDetailsEdit-actions

---

​

よく使われるカスタマイズ

​

ブランドカラー (16進数)

ブランドの16進数カラーコードをCSSで使用される形式に変換します。

:root {
  /* 16進数を直接使用する */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

  /* または、より柔軟な色操作のためにoklchを使用する */
  --primary: oklch(50% 0.2 265); /* 紫 */
}

​

ソフトコーナー

すべてのコンポーネントに丸みのあるデザインを適用するには：

:root {
  --radius-lg: 16px; /* ボタン、入力欄 */
  --radius-xl: 20px; /* カード */
  --radius-2xl: 24px; /* モーダル */
}

​

コンパクトなタイポグラフィ

よりコンパクトなUIの場合：

:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

---

​

ダークモード

コンポーネントは themeSettings の mode 設定に自動的に対応します。アプリのダークモードと同期するには：

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      themeSettings={{
        mode: isDark ? "dark" : "light",
      }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}

またはシステム設定を使用:

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

<Auth0ComponentProvider
  themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
>

Next.js

​

はじめに

1. スタイルシートをインポートします。

ルートレイアウトファイルに以下を追加します：

layout.tsx

import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
import "@auth0/universal-components-react/styles";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Auth0ComponentProvider
          mode="proxy"
          domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
          proxyConfig={{ baseUrl: "/api/auth" }}
        >
          {children}
        </Auth0ComponentProvider>
      </body>
    </html>
  );
}

Tailwind v4 を使用している場合: CSS ファイルに @import "@auth0/universal-components-react/tailwind" を追加します。

Shadcn を使用している場合: インポートは不要です。スタイルはすでに Tailwind のビルドに含まれています。

2. ブランドカラーを設定します。

:root {
  --primary: #4f46e5; /* ブランドカラー */
  --primary-foreground: #ffffff; /* ボタンのテキスト */
}

完了しました。すべてのボタン、リンク、アクティブ状態にブランドが適用されました。

---

​

テーマプリセット

themeSettings を Auth0ComponentProvider に渡して、組み込みテーマを切り替えます。

layout.tsx

<Auth0ComponentProvider
  mode="proxy"
  domain="your-tenant.auth0.com"
  proxyConfig={{ baseUrl: "/api/auth" }}
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  {/* アプリのコンポーネント */}
</Auth0ComponentProvider>

プリセット	説明
default	シャドウと枠線のバランスが取れた、標準的な Auth0 の外観
minimal	シャドウを抑え、枠線を細くした、より軽量な外観
rounded	角丸を大きくし、より柔らかな印象にした外観

---

​

CSS変数の確認

すべての視覚的プロパティはCSSカスタムプロパティで制御されます。スタイルシートまたは themeSettings.variables プロパティでオーバーライドできます。

色（ライト）

:root {
  /* ブランド - 最も影響力のある変数 */
  --primary: oklch(37% 0 0);              /* ボタン、links、アクティブ状態 */
  --primary-foreground: oklch(100% 0 0);  /* プライマリサーフェス上のテキスト */

/_ サーフェス _/
--background: oklch(100% 0 0); /_ ページ背景 _/
--foreground: oklch(9% 0 0); /_ デフォルトテキスト _/
--card: oklch(100% 0 0); /_ カード背景 _/
--card-foreground: oklch(0% 0 0); /_ カード内テキスト _/
--popover: oklch(100% 0 0); /_ ドロップダウン/ダイアログ背景 _/
--popover-foreground: oklch(9% 0 0); /_ ポップオーバー内テキスト _/
--input: oklch(100% 0 0); /_ 入力フィールド背景 _/

/_ セカンダリ & ミュート _/
--secondary: oklch(96% 0 0);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(96% 0 0); /_ 無効化された背景 _/
--muted-foreground: oklch(45% 0 0); /_ プレースホルダーテキスト _/

/_ アクセント & 破壊的操作 _/
--accent: oklch(97% 0 0); /_ ホバーハイライト _/
--accent-foreground: oklch(9% 0 0);
--destructive: oklch(93% 0.03 17); /_ エラー状態 _/
--destructive-foreground: oklch(36% 0.14 17);

/_ ボーダー _/
--border: oklch(89% 0 0);
--ring: oklch(89% 0 0); /_ フォーカスリング _/
}

色（ダーク）

.dark {
  /* ブランド */
  --primary: oklch(70% 0.15 250);         /* ダーク背景では明るく */
  --primary-foreground: oklch(10% 0 0);

  /* サーフェス */
  --background: oklch(12% 0 0);
  --foreground: oklch(95% 0 0);
  --card: oklch(15% 0 0);
  --card-foreground: oklch(95% 0 0);
  --popover: oklch(15% 0 0);
  --popover-foreground: oklch(95% 0 0);
  --input: oklch(18% 0 0);

  /* セカンダリ＆ミュート */
  --secondary: oklch(20% 0 0);
  --secondary-foreground: oklch(95% 0 0);
  --muted: oklch(20% 0 0);
  --muted-foreground: oklch(60% 0 0);

  /* アクセント＆デストラクティブ */
  --accent: oklch(25% 0 0);
  --accent-foreground: oklch(95% 0 0);
  --destructive: oklch(30% 0.15 17);
  --destructive-foreground: oklch(95% 0.05 17);

  /* ボーダー */
  --border: oklch(25% 0 0);
  --ring: oklch(35% 0 0);
}

角丸の半径

:root {
  /* 共通 - 全体的な印象を調整する */
  --radius-sm:  4px;    /* タグ、チップ */
  --radius-md:  6px;    /* 小さな要素 */
  --radius-lg:  10px;   /* ボタン、入力欄 */
  --radius-xl:  12px;   /* カード */
  --radius-2xl: 16px;   /* モーダル、大きなパネル */

/_ 細かい設定（ほとんど使用しない） _/
--radius-xs: 2px;
--radius-3xl: 20px;
--radius-4xl: 24px;
--radius-5xl: 32px;
}

タイポグラフィ

:root {
  --font-size-page-header:      2.25rem;   /* 36px - メインタイトル */
  --font-size-heading:          1.5rem;    /* 24px - セクション見出し */
  --font-size-title:            1.25rem;   /* 20px - カードタイトル */
  --font-size-subtitle:         1.125rem;  /* 18px - サブ見出し */
  --font-size-body:             1rem;      /* 16px - 本文テキスト */
  --font-size-paragraph:        0.875rem;  /* 14px - 説明文 */
  --font-size-label:            0.875rem;  /* 14px - フォームラベル */
  --font-size-page-description: 0.875rem;  /* 14px - サブタイトル */
}

---

​

スタイルコンポーネント

すべてのコンポーネントは、グローバルスタイルに影響を与えずに特定のスタイルを上書きするための styling プロパティを受け付けます。

layout.tsx

<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--primary": "#059669", // このコンポーネントのみオーバーライド
      },
      light: { "--card": "#f8fafc" },
      dark: { "--card": "#1e293b" },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>

使用するタイミング：

• variables - コンポーネント単位で適用される CSS カスタムプロパティのオーバーライド
• classes - 特定のコンポーネント部分に適用する Tailwind またはカスタムのクラス

コンポーネント別の使用可能なクラス対象

各コンポーネントは、主要なセクションに対応するクラスターゲットを公開しています。

SsoProviderCreate

• SsoProviderCreate-header, SsoProviderCreate-wizard
• ProviderSelect-root, ProviderDetails-root, ProviderConfigure-root

SsoProviderTable

• SsoProviderTable-header, SsoProviderTable-table, SsoProviderTable-row

SsoProviderEdit

• SsoProviderEdit-header, SsoProviderEdit-tabs
• SsoProviderEdit-ssoTab, SsoProviderEdit-provisioningTab, SsoProviderEdit-domainsTab

DomainTable

• DomainTable-header, DomainTable-table
• DomainTable-createModal, DomainTable-configureModal, DomainTable-deleteModal

OrganizationDetailsEdit

• OrganizationDetailsEdit-header, OrganizationDetailsEdit-form, OrganizationDetailsEdit-actions

---

​

よく使われるカスタマイズ

​

ブランドカラー (16進数)

ブランドの16進数カラーコードをCSSで使用される形式に変換します。

:root {
  /* 16進数を直接使用する */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

  /* または、色操作をより柔軟に行うためにoklchを使用する */
  --primary: oklch(50% 0.2 265); /* 紫 */
}

​

ソフトコーナー

すべてのコンポーネントに丸みのあるデザインを適用するには：

:root {
  --radius-lg: 16px; /* ボタン、入力欄 */
  --radius-xl: 20px; /* カード */
  --radius-2xl: 24px; /* モーダル */
}

​

コンパクトなタイポグラフィ

よりコンパクトなUIの場合：

:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

---

​

ダークモード

コンポーネントは themeSettings の mode 設定に自動的に対応します。アプリのダークモードと同期させるには:

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{
        mode: isDark ? "dark" : "light",
      }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}

またはシステム設定を使用:

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

<Auth0ComponentProvider
  mode="proxy"
  domain="your-tenant.auth0.com"
  proxyConfig={{ baseUrl: "/api/auth" }}
  themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
>

shadcn

​

はじめに

1. スタイルのインポートは不要です。

Shadcnを使用する場合、スタイルはすでにTailwindのビルドに含まれています。追加のインポートは不要です。

Tailwind v4 を使用している場合は、CSS ファイルに @import "@auth0/universal-components-react/tailwind" を追加します。

2. ブランドカラーを追加します。

:root {
  --primary: #4f46e5; /* ブランドカラー */
  --primary-foreground: #ffffff; /* ボタンのテキスト */
}

完了しました。すべてのボタン、リンク、アクティブ状態にブランドが適用されました。

---

​

テーマプリセット

themeSettings を Auth0ComponentProvider に渡して、組み込みテーマを切り替えます。

App.tsx

<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  <App />
</Auth0ComponentProvider>

プリセット	説明
default	影と枠線のバランスを取った、標準的なAuth0の外観
minimal	影を減らし、枠線を薄くして、視覚的な重さを抑えたスタイル
rounded	角丸を大きくして、より柔らかな印象にしたスタイル

---

​

CSS変数の確認

すべての視覚的プロパティはCSSカスタムプロパティで制御されます。スタイルシートまたは themeSettings.variables プロパティでオーバーライドできます。

色（ライト）

:root {
  /* ブランド - 最も影響力のある変数 */
  --primary: oklch(37% 0 0);              /* ボタン、リンク、アクティブ状態 */
  --primary-foreground: oklch(100% 0 0);  /* プライマリサーフェス上のテキスト */

/_ サーフェス _/
--background: oklch(100% 0 0); /_ ページ背景 _/
--foreground: oklch(9% 0 0); /_ デフォルトテキスト _/
--card: oklch(100% 0 0); /_ カード背景 _/
--card-foreground: oklch(0% 0 0); /_ カード内テキスト _/
--popover: oklch(100% 0 0); /_ ドロップダウン/ダイアログ背景 _/
--popover-foreground: oklch(9% 0 0); /_ ポップオーバー内テキスト _/
--input: oklch(100% 0 0); /_ 入力フィールド背景 _/

/_ セカンダリ & ミュート _/
--secondary: oklch(96% 0 0);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(96% 0 0); /_ 無効状態の背景 _/
--muted-foreground: oklch(45% 0 0); /_ プレースホルダーテキスト _/

/_ アクセント & デストラクティブ _/
--accent: oklch(97% 0 0); /_ ホバーハイライト _/
--accent-foreground: oklch(9% 0 0);
--destructive: oklch(93% 0.03 17); /_ エラー状態 _/
--destructive-foreground: oklch(36% 0.14 17);

/_ ボーダー _/
--border: oklch(89% 0 0);
--ring: oklch(89% 0 0); /_ フォーカスリング _/
}

色（ダーク）

.dark {
  /* ブランド */
  --primary: oklch(70% 0.15 250);         /* ダーク背景では明るく */
  --primary-foreground: oklch(10% 0 0);

  /* サーフェス */
  --background: oklch(12% 0 0);
  --foreground: oklch(95% 0 0);
  --card: oklch(15% 0 0);
  --card-foreground: oklch(95% 0 0);
  --popover: oklch(15% 0 0);
  --popover-foreground: oklch(95% 0 0);
  --input: oklch(18% 0 0);

  /* セカンダリ＆ミュート */
  --secondary: oklch(20% 0 0);
  --secondary-foreground: oklch(95% 0 0);
  --muted: oklch(20% 0 0);
  --muted-foreground: oklch(60% 0 0);

  /* アクセント＆デストラクティブ */
  --accent: oklch(25% 0 0);
  --accent-foreground: oklch(95% 0 0);
  --destructive: oklch(30% 0.15 17);
  --destructive-foreground: oklch(95% 0.05 17);

  /* ボーダー */
  --border: oklch(25% 0 0);
  --ring: oklch(35% 0 0);
}

角の丸み

:root {
  /* 共通 - 全体的な印象に合わせて調整してください */
  --radius-sm:  4px;    /* タグ、チップ */
  --radius-md:  6px;    /* 小さな要素 */
  --radius-lg:  10px;   /* ボタン、入力欄 */
  --radius-xl:  12px;   /* カード */
  --radius-2xl: 16px;   /* モーダル、大きなパネル */

/_ 細かい設定（ほとんど使用しない） _/
--radius-xs: 2px;
--radius-3xl: 20px;
--radius-4xl: 24px;
--radius-5xl: 32px;
}

タイポグラフィ

:root {
  --font-size-page-header:      2.25rem;   /* 36px - メインタイトル */
  --font-size-heading:          1.5rem;    /* 24px - セクション見出し */
  --font-size-title:            1.25rem;   /* 20px - カードタイトル */
  --font-size-subtitle:         1.125rem;  /* 18px - サブ見出し */
  --font-size-body:             1rem;      /* 16px - 本文テキスト */
  --font-size-paragraph:        0.875rem;  /* 14px - 説明文 */
  --font-size-label:            0.875rem;  /* 14px - フォームラベル */
  --font-size-page-description: 0.875rem;  /* 14px - サブタイトル */
}

---

​

スタイルコンポーネント

すべてのコンポーネントは、グローバルスタイルに影響を与えずに特定のスタイルを上書きするための styling プロパティを受け付けます。

<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--primary": "#059669", // このコンポーネントのみオーバーライド
      },
      light: { "--card": "#f8fafc" },
      dark: { "--card": "#1e293b" },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>

使用するタイミング：

• variables - コンポーネントにスコープされた CSS カスタムプロパティの上書き
• classes - コンポーネントの特定の部分に適用される Tailwind またはカスタムのクラス

コンポーネント別の利用可能なクラス対象

各コンポーネントでは、主要セクションに対応するクラスターゲットを公開しています。

SsoProviderCreate

• SsoProviderCreate-header, SsoProviderCreate-wizard
• ProviderSelect-root, ProviderDetails-root, ProviderConfigure-root

SsoProviderTable

• SsoProviderTable-header, SsoProviderTable-table, SsoProviderTable-row

SsoProviderEdit

• SsoProviderEdit-header, SsoProviderEdit-tabs
• SsoProviderEdit-ssoTab, SsoProviderEdit-provisioningTab, SsoProviderEdit-domainsTab

DomainTable

• DomainTable-header, DomainTable-table
• DomainTable-createModal, DomainTable-configureModal, DomainTable-deleteModal

OrganizationDetailsEdit

• OrganizationDetailsEdit-header, OrganizationDetailsEdit-form, OrganizationDetailsEdit-actions

---

​

よく使われるカスタマイズ

​

ブランドカラー (Hex)

ブランドの16進数カラーコードをCSSで使用される形式に変換します。

:root {
  /* 16進数を直接使用する */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

  /* または、色操作をより柔軟に行うためにoklchを使用する */
  --primary: oklch(50% 0.2 265); /* 紫 */
}

​

ソフトコーナー

すべてのコンポーネントに丸みのあるデザインを適用するには：

:root {
  --radius-lg: 16px; /* ボタン、入力欄 */
  --radius-xl: 20px; /* カード */
  --radius-2xl: 24px; /* モーダル */
}

​

コンパクトなタイポグラフィ

よりコンパクトなUIの場合：

:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

---

​

ダークモード

コンポーネントは themeSettings の mode 設定に自動的に対応します。アプリのダークモードと同期するには：

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      themeSettings={{
        mode: isDark ? "dark" : "light",
      }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}

またはシステム設定を使用:

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

<Auth0ComponentProvider
  themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
>