メインコンテンツへスキップ

Before you start

以下が必要です。
ユニバーサルログインでは、認証プロセスのステップであるプロンプトがいくつも提供されており、各ステップには1つ以上の画面があります。ACULを使用すると、すべてのカスタム画面にテーマを適用できます。 以下に例を示します。
ログインID参考スクリーンショット
Tailwind CSS v4を使用して、このログイン画面にテーマを適用できます。 すべてのテーマとブランディングのカスタマイズは、ACULプロジェクトのsrc/index.cssディレクトリにあります。
  1. Auth0 CLIツールを使用して、新しいテーマを適用する画面を含むACULプロジェクトを作成します。
auth0 acul init <Your-App-Name>
  1. CSSファイルsrc/index.cssを編集します。
/* In src/index.css */
:root {
  /* Change these CSS variables to match your brand's primary color */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* Override the theme variables to reference your custom color*/  
  --color-primary-button: var(--ul-theme-color-primary-button);

  /* You can also override specific component colors directly */
  --color-header: var(--primary-foreground);
  --color-body-text: #000000;
  --color-widget-bg: white;
  --color-widget-border: transparent;
  /* ... and many more */
}
@theme inlineブロック内のCSS変数は、基本コンポーネントによって使用されます。 プレフィックス--ul-theme-の付いたCSS変数は、デフォルトのユニバーサルログインスタイルに設定され、実行時にテナントに設定されたブランディングテーマによって自動的に上書きされます。詳しくは、プロジェクトディレクトリ内のsrc/utils/theme/themeEngine.tsファイルをご覧ください。