> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

Auth0 Universal Components は、Tailwind CSS と Radix UI のプリミティブを基盤とするデザインシステムで構築されています。コンポーネントが直接参照する CSS カスタムプロパティを設定することで、ブランドをカスタマイズできます。

以下から CSS の設定を選択してください。

<Tabs>
  <Tab title="プレーンCSS">
    ## 設定

    アプリのエントリーポイントで、プリコンパイル済みのスタイルシートをインポートします。

    ```tsx theme={null}
    import "@auth0/universal-components-react/styles";
    ```

    次に、CSS でトークンをオーバーライドします:

    ```css theme={null}
    :root {
      --auth0-primary: #4f46e5;            /* ブランドカラー */
      --auth0-primary-foreground: #ffffff; /* プライマリ背景上のテキスト */
    }
    ```

    すべてのコンポーネントの色は、この2つのトークンから派生します。必要に応じて、[CSS変数リファレンス](#css-variables)から他の変数を追加してください。

    <Callout icon="triangle-exclamation" color="#F59E0B" iconType="regular">
      プレーンCSSモードでは、`--primary` または `--color-primary` を設定しても反映されません。コンパイル済みのスタイルシートは、`--auth0-*` 変数を直接参照します。
    </Callout>

    ***

    ## テーマプリセット

    `Auth0ComponentProvider` に `themeSettings` を渡すことで、組み込みのビジュアルバリアントを切り替えられます。

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

    <table class="table">
      <thead>
        <tr>
          <th>プリセット</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>default</code></td>
          <td>影と枠線のバランスが取れた標準的な Auth0 の外観</td>
        </tr>

        <tr>
          <td><code>minimal</code></td>
          <td>視覚的な重厚感を抑えたデザイン — 影を減らし、枠線を薄く</td>
        </tr>

        <tr>
          <td><code>rounded</code></td>
          <td>角丸を大きくし、より柔らかな印象に</td>
        </tr>
      </tbody>
    </table>

    <Callout icon="circle-info" color="#6366F1" iconType="regular">
      シャドウ変数は、`default`プリセットでのみ有効です。`minimal`および`rounded`プリセットでは、シャドウが内部的に無効化されます。
    </Callout>

    ***

    ## CSS変数リファレンス

    すべての視覚的なプロパティは CSS カスタムプロパティによって制御されます。上記の「設定」で示したようにスタイルシートで上書きするか、[`themeSettings.variables` プロップ](#js-api)を使って上書きしてください。

    ライトモードのデフォルト値は `:root` で指定します。ダークモードの値には `.dark` または `themeSettings.mode` を使用してください。

    <Tabs>
      <Tab title="色">
        ```css theme={null}
        :root {
          /* ブランド */
          --auth0-primary: oklch(37% 0 0);              /* ボタン、リンク、アクティブ状態 */
          --auth0-primary-foreground: oklch(100% 0 0);  /* プライマリ面上のテキスト */

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

          /* セカンダリとミュート */
          --auth0-secondary: oklch(96% 0 0);
          --auth0-secondary-foreground: oklch(100% 0 0);
          --auth0-muted: oklch(96% 0 0);                /* 無効／控えめな背景 */
          --auth0-muted-foreground: oklch(45% 0 0);     /* プレースホルダーのテキスト */

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

          /* ボーダー */
          --auth0-border: oklch(89% 0 0);
          --auth0-ring: oklch(89% 0 0);                 /* フォーカスリング */
        }
        ```
      </Tab>

      <Tab title="ステータスカラー">
        ステータスカラーのトークンには接頭辞を付けず、`--auth0-*` カラーセットとは別に設定します。

        | トークン                         | 設定対象                  |
        | ---------------------------- | --------------------- |
        | `--color-page`               | ページレベルの背景 (最も外側のコンテナ) |
        | `--color-info`               | 情報アラートの背景             |
        | `--color-info-foreground`    | 情報アラートのテキストとアイコン      |
        | `--color-success`            | 成功アラートの背景             |
        | `--color-success-foreground` | 成功アラートのテキストとアイコン      |
        | `--color-warning`            | 警告アラートの背景             |
        | `--color-warning-foreground` | 警告アラートのテキストとアイコン      |
        | `--color-destructive-border` | 破壊的操作用の入力欄/ボタンの枠線     |
        | `--color-popover-border`     | ポップオーバー/ドロップダウンの枠線    |
        | `--color-input-foreground`   | 入力テキストの色              |
        | `--color-input-muted`        | ミュートされた入力バリアントの背景     |

        `:root` または `themeSettings.variables.light` / `.dark` でオーバーライドします。

        ```css theme={null}
        :root {
          --color-success: oklch(94% 0.05 145);
          --color-success-foreground: oklch(30% 0.1 145);
        }
        ```
      </Tab>

      <Tab title="角の丸み">
        ```css theme={null}
        :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;
          --radius-6xl: 40px;
          --radius-7xl: 48px;
          --radius-8xl: 56px;
          --radius-9xl: 64px;
        }
        ```
      </Tab>

      <Tab title="タイポグラフィ">
        ```css theme={null}
        :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 — ページのサブタイトル */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## JS API によるオーバーライド

    プログラムから上書きするには、`themeSettings.variables` を `Auth0ComponentProvider` に渡します。この値は詳細度が最も高く、`:root` の CSS とスタイルシート内の値の両方を上書きします。

    変数は次の3つのグループに分類されます。

    * `common` — モードに関係なく適用されます (角丸、タイポグラフィ)
    * `light` — `mode: "light"` のときに適用されます
    * `dark` — `mode: "dark"` のときに適用されます

    ```tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light",
        variables: {
          common: {
            "--radius-lg": "12px",
            "--font-size-body": "0.875rem",
          },
          light: {
            "--auth0-primary": "#4f46e5",
            "--auth0-primary-foreground": "#ffffff",
            "--auth0-background": "#fafafa",
          },
          dark: {
            "--auth0-primary": "#818cf8",
            "--auth0-background": "#121212",
          },
        },
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      `themeSettings.variables` では、CSS の設定にかかわらず、カラートークンには常に `--auth0-*` という名前が使用されます。角丸とタイポグラフィのトークンには、それぞれ固有の名前 (`--radius-*`、`--font-size-*`) が使用されます。
    </Callout>

    ***

    ## コンポーネントごとのオーバーライド

    すべてのコンポーネントは `styling` プロップを受け取り、グローバルスタイルに影響を与えることなく、オーバーライドの適用範囲を限定できます。

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--radius-lg": "16px",
          },
          light: {
            "--auth0-primary": "#059669",
            "--auth0-card": "#f8fafc",
          },
          dark: {
            "--auth0-primary": "#34d399",
            "--auth0-card": "#1e293b",
          },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    このコンポーネントにスコープが設定されたCSS tokenの上書きには `variables` を、コンポーネントの特定の部分に適用するTailwindクラスやカスタムクラスには `classes` を使用します。

    <Accordion title="コンポーネントごとに使用可能なクラスターゲット">
      **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`
    </Accordion>

    ***

    ## よくあるカスタマイズ

    ### ブランドカラー

    ```css theme={null}
    :root {
      --auth0-primary: #4f46e5;
      --auth0-primary-foreground: #ffffff;
    }
    ```

    ### 丸みのある角

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

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

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## ダークモード

    コンポーネントは `themeSettings.mode` に応じて表示が変わります。アプリのテーマ state と接続してください:

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

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

    または、システムの設定に合わせて同期する場合:

    ```tsx theme={null}
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

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

    サーバーサイドレンダリングを使用する **Next.js** では、読み込み時のちらつきを防ぐため、優先モードを Cookie から読み取ります。

    ```tsx layout.tsx theme={null}
    export default async function RootLayout({ children }) {
      const cookieStore = await cookies();
      const mode = cookieStore.get("theme-mode")?.value === "dark" ? "dark" : "light";

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

  <Tab title="Tailwind v4">
    ## 設定

    Tailwind とコンポーネントのスタイルシートの両方を import します。

    ```css theme={null}
    @import 'tailwindcss';
    @import '@auth0/universal-components-react/tailwind';
    ```

    デザイントークンを定義し、`@theme inline` で Tailwind のユーティリティから利用できるようにします。

    ```css theme={null}
    @theme inline {
      --color-primary: var(--color-primary);
      --color-primary-foreground: var(--color-primary-foreground);
      /* Tailwind ユーティリティで使用するその他のトークンを追加 */
    }

    :root {
      --color-primary: #4f46e5;
      --color-primary-foreground: #ffffff;
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Next.js:** 同じパターンです。`@import` 行と `@theme` ブロックは `globals.css` に記述し、カラーオーバーライドは `globals.css` からインポートする `light.css` と `dark.css` に分けます。ルートの `layout.tsx` で `globals.css` をインポートします。
    </Callout>

    ***

    ## テーマプリセット

    `Auth0ComponentProvider` に `themeSettings` を渡すことで、組み込みのビジュアルバリアントを切り替えられます。

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

    <table class="table">
      <thead>
        <tr>
          <th>プリセット</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>default</code></td>
          <td>シャドウと枠線のバランスが取れた標準的なAuth0の外観</td>
        </tr>

        <tr>
          <td><code>minimal</code></td>
          <td>視覚的な重みを抑えたデザイン — シャドウを減らし、枠線を細く</td>
        </tr>

        <tr>
          <td><code>rounded</code></td>
          <td>より柔らかな印象になるよう、角丸を大きく</td>
        </tr>
      </tbody>
    </table>

    <Callout icon="circle-info" color="#6366F1" iconType="regular">
      シャドウ変数は、`default` プリセットでのみ有効になります。`minimal` および `rounded` プリセットでは、シャドウが内部的に無効化されます。
    </Callout>

    ***

    ## CSS変数リファレンス

    視覚的なプロパティはすべてCSSカスタムプロパティによって制御されます。これらを上書きするには、スタイルシート内で指定する (上記の「設定」を参照) か、[`themeSettings.variables` プロップ](#js-api-tailwind)を使用してください。

    ライトモードのデフォルト値は `:root` に設定します。ダークモードの値には `.dark` または `themeSettings.mode` を使用してください。

    <Tabs>
      <Tab title="色">
        ```css theme={null}
        :root {
          /* ブランド */
          --color-primary: oklch(37% 0 0);              /* ボタン、リンク、アクティブ状態 */
          --color-primary-foreground: oklch(100% 0 0);  /* プライマリ面上のテキスト */

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

          /* セカンダリとミュート */
          --color-secondary: oklch(96% 0 0);
          --color-secondary-foreground: oklch(100% 0 0);
          --color-muted: oklch(96% 0 0);                /* 無効時／控えめな背景 */
          --color-muted-foreground: oklch(45% 0 0);     /* プレースホルダーのテキスト */

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

          /* ボーダー */
          --color-border: oklch(89% 0 0);
          --color-ring: oklch(89% 0 0);                 /* フォーカスリング */
        }
        ```
      </Tab>

      <Tab title="ステータスの色">
        ステータスカラーのトークンは、上記のブランドトークンと同じ `--color-*` 命名規則に従います。

        | トークン                         | 制御対象                 |
        | ---------------------------- | -------------------- |
        | `--color-page`               | ページ全体の背景 (最も外側のコンテナ) |
        | `--color-info`               | 情報アラートの背景            |
        | `--color-info-foreground`    | 情報アラートのテキストとアイコン     |
        | `--color-success`            | 成功アラートの背景            |
        | `--color-success-foreground` | 成功アラートのテキストとアイコン     |
        | `--color-warning`            | 警告アラートの背景            |
        | `--color-warning-foreground` | 警告アラートのテキストとアイコン     |
        | `--color-destructive-border` | エラー状態の入力欄/ボタンの枠線     |
        | `--color-popover-border`     | ポップオーバー/ドロップダウンの枠線   |
        | `--color-input-foreground`   | 入力テキストの色             |
        | `--color-input-muted`        | 控えめな入力バリアントの背景       |

        `:root` 内、または `themeSettings.variables.light` / `.dark` でオーバーライドします。

        ```css theme={null}
        :root {
          --color-success: oklch(94% 0.05 145);
          --color-success-foreground: oklch(30% 0.1 145);
        }
        ```
      </Tab>

      <Tab title="角丸の半径">
        ```css theme={null}
        :root {
          /* 調整する機会が最も多い項目 */
          --radius-sm:  4px;   /* tags、チップ */
          --radius-md:  6px;   /* 小さな要素 */
          --radius-lg:  10px;  /* ボタン、入力欄 */
          --radius-xl:  12px;  /* カード */
          --radius-2xl: 16px;  /* modal、大きな panel */

          /* fine-grained な調整用 */
          --radius-xs:  2px;
          --radius-3xl: 20px;
          --radius-4xl: 24px;
          --radius-5xl: 32px;
          --radius-6xl: 40px;
          --radius-7xl: 48px;
          --radius-8xl: 56px;
          --radius-9xl: 64px;
        }
        ```
      </Tab>

      <Tab title="タイポグラフィ">
        ```css theme={null}
        :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 — ページのサブタイトル */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## JS API によるオーバーライド

    プログラムによる上書きを行うには、`themeSettings.variables` を `Auth0ComponentProvider` に渡します。これらは詳細度が最も高く、`:root` の CSS とスタイルシートの値の両方を上書きします。

    変数は次の3つのバケットに分類されます。

    * `common` — モードにかかわらず適用 (角丸、タイポグラフィ)
    * `light` — `mode: "light"` のときに適用
    * `dark` — `mode: "dark"` のときに適用

    ```tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light",
        variables: {
          common: {
            "--radius-lg": "12px",
            "--font-size-body": "0.875rem",
          },
        },
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    ***

    ## コンポーネントごとのオーバーライド

    すべてのコンポーネントは `styling` プロップを受け取り、グローバルスタイルに影響を与えることなく、オーバーライドの適用範囲を限定できます。

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--radius-lg": "16px",
          },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    このコンポーネントにスコープが設定されたCSSトークンのオーバーライドには`variables`を、コンポーネントの特定の部分に適用するTailwindクラスやカスタムクラスには`classes`を使用します。

    <Accordion title="コンポーネントごとに利用可能なクラスターゲット">
      **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`
    </Accordion>

    ***

    ## よくあるカスタマイズ

    ### ブランドカラー

    ```css theme={null}
    :root {
      --color-primary: #4f46e5;
      --color-primary-foreground: #ffffff;
    }
    ```

    ### 丸みのある角

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

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

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## ダークモード

    コンポーネントは `themeSettings.mode` に応じて表示が変わります。アプリのテーマ state と連携させてください:

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

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

    または、システムの設定に合わせる:

    ```tsx theme={null}
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

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

    サーバーサイドレンダリングを使用する **Next.js** では、読み込み時のちらつきを防ぐために、優先モードを Cookie から読み取ります。

    ```tsx layout.tsx theme={null}
    export default async function RootLayout({ children }) {
      const cookieStore = await cookies();
      const mode = cookieStore.get("theme-mode")?.value === "dark" ? "dark" : "light";

      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
              proxyConfig={{ baseUrl: "/api/auth" }}
              themeSettings={{ mode }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```
  </Tab>
</Tabs>